让每一名学员高薪就业
返回列表 发新帖

【Javascript】 new关键字创建对象底层原理

[复制链接]

151

主题

455

帖子

2867

积分

版主

Rank: 7Rank: 7Rank: 7

积分
2867

版主论坛荣誉内测

发表于 2018-9-29 11:12:09  | 显示全部楼层 | 阅读模式
我们都知道,new关键字可以js里可以产生一个对象,但是它到底是怎么产生的对象呢?现在我们就来探秘new的底层原理。
  1. <font size="2">//人类构造函数
  2. function People(){

  3. }
  4. People.prototype.index = 1;    //在原型上绑定一个index属性,值为1

  5. var p1 = new People();    //我们都知道使用new可以产生一个对象,但是到底是怎么产生出来的对象,想必很多同学都不清楚</font>
复制代码
每当我们使用new产生对象的时候,底层进行了很多操作,简单描述可分为以下2步
1. 实例化一个空对象(Object),继承构造函数的原型(prototype)
2. 已当前Object为上下文,执行new后面的函数,并改变this指向
分步解析
  1. <font size="2">new People() = {
  2. //1    var obj = new Object();
  3. //2    obj.__proto__ = People.prototype;
  4. //3    People.call(obj);
  5. }</font>
复制代码
1)第1行:创建一个空对象obj;
2)第2行:把obj的proto指向People的原型对象prototype
3)第3行:在当前对象上下文内执行People函数,并改变this指向,指向此对象本身
那么属性是在什么时候绑定上去的呢?我们可以看到People原型的index属性并没有赋值过给obj,但是为什么obj有index这个属性呢?
  1. <font size="2">function People(){

  2. }
  3. People.prototype.index = 1;

  4. var p1 = new People();
  5. console.log(p1.index);  //打印1</font>
复制代码
其实,当我们把obj的proto指向People的原型对象时,就产生了obj的原型链
obj -> People.prototype -> Object.prototype -> null
当我们在找obj.index属性时,它会先找自身的index属性,如果找不到,则会顺着原型链向上找,这时会找到People.prototype.index,所以最后打印1。
如果在People的原型上也找不到,那么它会继续往上去找,直到最后找到null。
  1. <font size="2">function People(){

  2. }
  3. People.address = "ChengDu";
  4. People.prototype.index = 1;

  5. var p1 = new People();
  6. console.log(p1.index);  //1
  7. console.log(p1.address);    //undefined</font>
复制代码
为什么address属性获取不到呢?仔细看,People这个构造函数其实并不在原型链上,address属性绑定的实在People函数本身,而没有在People.prototype上!
如果你能看理解上面的代码,说明你已经对这块已经比较熟了,那么我们再往下看!
  1. <font size="2">1 function People(){
  2. 2
  3. 3 }
  4. 4 People.prototype.index = 1;

  5. 5 var p1 = new People();
  6. 6 People.prototype.index = 20;
  7. 7 console.log(p1.index);  //现在p1.index等于多少呢?1还是20?</font>
复制代码
如果你的答案是20,你已经掌握了刚才的内容。
(1) 第5行,产生p1
(2) 第6行,修改People原型的index属性,index现在变为了20
(3)第7行,访问p1.index,p1因为没有index属性,所以顺着原型链找到People.prototype.index,打印20
我们再来看一个变形示例
  1. <font size="2">1 function People(){
  2. 2   
  3. 3 }
  4. 4 People.prototype.index = 1;

  5. 5 var p1 = new People();
  6. 6 p1.index = 30;
  7. 7 console.log(p1.index);  //现在p1.index是多少?
  8. 8 console.log(People.prototype.index) //1还是30?</font>
复制代码
答案,p1.index = 30; People.prototype.index = 1; 如果你已经正确!恭喜,你已经熟练掌握本章内容,可以跳过以下部分!
(1) 第5行,产生p1
(2) 第6行,给p1绑定index属性,并赋值30
(3)第7行,访问p1.index,找属性时,会优先找自己身上,如果没有,才会顺着原型链向上找,此时自身已有index属性,所以打印30
(4) 第8行,访问People.prototype.index,因为People原型的index属性并没被修改过,所以打印的值还是1

   感谢源码时代教学讲师提供此文章!
   本文为原创文章,转载请注明出处!

“尔康,你现在幸福吗?”“紫薇,你忘了?我一直就姓福啊。”
回复

使用道具 举报

0

主题

0

帖子

-43

积分

限制会员

积分
-43
发表于 2018-9-29 11:21:50  | 显示全部楼层
我想要源码的纪念品
回复 支持 反对

使用道具 举报

0

主题

4

帖子

-10

积分

限制会员

积分
-10
发表于 2018-9-29 11:23:05  | 显示全部楼层
培训多久毕业
回复 支持 反对

使用道具 举报

0

主题

0

帖子

-28

积分

限制会员

积分
-28
发表于 2018-9-29 11:23:06  | 显示全部楼层
顶源码。
回复 支持 反对

使用道具 举报

0

主题

0

帖子

-25

积分

限制会员

积分
-25
发表于 2018-9-29 11:37:54  | 显示全部楼层
什么都不说,先赞一个!
回复 支持 反对

使用道具 举报

0

主题

0

帖子

-23

积分

限制会员

积分
-23
发表于 2018-9-29 11:44:01  | 显示全部楼层
来源码培训的学费是多少
回复 支持 反对

使用道具 举报

0

主题

0

帖子

-21

积分

限制会员

积分
-21
发表于 2018-9-29 11:56:18  | 显示全部楼层
我想要源码的纪念品
回复 支持 反对

使用道具 举报

0

主题

0

帖子

-45

积分

限制会员

积分
-45
发表于 2018-9-29 12:00:43  | 显示全部楼层
我想要源码的纪念品
回复 支持 反对

使用道具 举报

0

主题

0

帖子

-45

积分

限制会员

积分
-45
发表于 2018-9-29 12:08:45  | 显示全部楼层
我要把这个帖子一直往上顶!
回复 支持 反对

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

推荐阅读

最新活动

联系我们

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   Python培训  |   大数据培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表