JavaScript: new关键字创建对象底层原理

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

QQ截图20180925103656.png

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

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

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

分步解析

image
  1. 第1行:创建一个空对象obj;

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

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

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

image

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

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

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

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

image

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

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

image

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

  1. 第5行,产生p1

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

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

我们再来看一个变形示例

image

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

推荐阅读更多精彩内容

  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 2,626评论 0 19
  • 面向对象(Object-Oriented,OO)的语言有一个标志,那就是它们都有类的慨念,而通过类可以创建任意多个...
    threetowns阅读 317评论 0 3
  •   面向对象(Object-Oriented,OO)的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意...
    霜天晓阅读 1,217评论 0 5
  • 面向对象的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。ECMAScr...
    DHFE阅读 388评论 0 4
  • 这几天天总是阴沉沉的,好像要什么雨什么的。早晨起来,就收到村部发来的通知,必须要把自己村湾的垃圾捡干净,清理卫生。...
    米澜盛若阅读 60评论 2 1