网赚妈妈

 找回密码
 立即注册
搜索
查看: 294|回复: 3

[网赚兼职] 「Javascript」new关键字创建对象底层原理

[复制链接]
  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

    发表于 2018-9-25 19:22:29 | 显示全部楼层 |阅读模式
    lrDG90bhNcdDOgQi.jpg

    我们都知道,new关键字可以在js里可以产生一个新对象,但是它到底是怎么产生的对象呢?现在我们就来探秘new的底层原理

    //人类构造函数function People(){}People.prototype.index = 1; //在原型上绑定一个index属性,值为1var p1 = new People(); //我们都知道使用new可以产生一个对象,但是到底是怎么产生出来的对象,想必很多同学都不清楚

    每当我们使用new产生对象的时候,底层进行了很多操作,简单描述可分为以下2步

    1. 实例化一个空对象(Object),继承构造函数的原型(prototype)

    2. 已当前Object为上下文,执行new后面的函数,并改变this指向

    分步解析

    new People() = {//1 var obj = new Object();//2 obj.__proto__ = People.prototype;//3 People.call(obj);}

    (1)第1行:创建一个空对象obj;

    (2)第2行:把obj的proto指向People的原型对象prototype

    (3)第3行:在当前对象上下文内执行People函数,并改变this指向,指向此对象本身

    那么属性是在什么时候绑定上去的呢?我们可以看到People原型的index属性并没有赋值过给obj,但是为什么obj有index这个属性呢?

    function People(){}People.prototype.index = 1;var p1 = new People();console.log(p1.index); //打印1

    其实,当我们把obj的proto指向People的原型对象时,就产生了obj的原型链

    obj -> People.prototype -> Object.prototype -> null

    当我们在找obj.index属性时,它会先找自身的index属性,如果找不到,则会顺着原型链向上找,这时会找到People.prototype.index,所以最后打印1。

    如果在People的原型上也找不到,那么它会继续往上去找,直到最后找到null。

    function People(){}People.address = "ChengDu";People.prototype.index = 1;var p1 = new People();console.log(p1.index); //1console.log(p1.address); //undefined

    为什么address属性获取不到呢?仔细看,People这个构造函数其实并不在原型链上,address属性绑定的实在People函数本身,而没有在People.prototype上!

    如果你能看理解上面的代码,说明你已经对这块已经比较熟了,那么我们再往下看!

    1 function People(){2 3 }4 People.prototype.index = 1;5 var p1 = new People();6 People.prototype.index = 20;7 console.log(p1.index); //现在p1.index等于多少呢?1还是20?

    如果你的答案是20,你已经掌握了刚才的内容。

    (1) 第5行,产生p1

    (2) 第6行,修改People原型的index属性,index现在变为了20

    (3)第7行,访问p1.index,p1因为没有index属性,所以顺着原型链找到People.prototype.index,打印20

    我们再来看一个变形示例

    1 function People(){2 3 }4 People.prototype.index = 1;5 var p1 = new People();6 p1.index = 30;7 console.log(p1.index); //现在p1.index是多少?8 console.log(People.prototype.index) //1还是30?

    答案,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

    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-25 19:23:12 | 显示全部楼层
    不错不错,讲解的简单易懂
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-25 19:53:37 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-25 20:22:51 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

    xml|2.xml|QQ3014497968|文章发布|签到|小黑屋|网赚论坛-致富项目网络赚钱平台 |网站地图

    GMT+8, 2019-10-18 04:02 , Processed in 0.169340 second(s), 14 queries , File On.

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表