复习Javascript原型链

现在我们在日常的工作中由于有各种大神造好的轮子,导致我们在业务开发中已经很少能经常性接触到开发低层的一些事情。有时候就要时不时的给自己充充电,否则我们就只能用降龙十八掌吓唬人了,根本没有内功 :P

原型对象和构造函数

我们从一个构造函数开始:

1
2
3
4
function Person (name) {
this.name = name
}
var person = new Person('Jack')

我们在声明它的时候,JS会自动生成一个与其对应原型对象(原型对象是对象),该构造函数会有一个内部属性,名为prototype指向原型对象,你可以通过Person.prototype来访问其中的内容,这也就是我们通常在原型对象上挂载属性和方法的方式。

原型对象上也会有一个属性constructor指向该构造函数(在高程中的描述是:指向函数本身)。

其实我们可以把构造函数和原型对象理解为: 前者是制造汽车的机器,而后者是设计图纸,制造每一种汽车都需要对应的设计图纸,有了造车的机器才能制造对应的汽车,而有了设计图纸才能设计出造车的机器。我们只要拿到设计图,就能设计出造车的机器,也就能制造出相对应类型的汽车了。嗯……所以在各种大片里设计图都是最牛X的东西。

当我们使用new关键字实例化构造函数之后(造出一部车),该实例就会包含一个可访问的内部属性__proto__,用于指向构造函数的原型对象。(其实也就是每一部车都能追溯到设计图稿(prototype),而设计图稿又能回追到制造机器(constructor))

我们在浏览器的调试器中看看实际情况:

实例化后的person对象

  • 我们看到了属性name
  • 看到了其包含一个__proto__,其指向构造函数的原型对象
  • 而原型对象中包含一个constructor属性指向构造函数本身。

原型对象的原型

OK,那我们看到了在原型对象中也包含了一个__proto__,根据我们上面说到的,如果是实例的话,它就会包含一个该属性指向其构造函数的原型对象,说明我们的Person原型对象也是一个实例!而它正是由Object()构造出来的!因此,这里的__proto__指向了Object构造函数的原型对象

原型对象的原型

  • 我们看到其具有Object的所有原型方法,例如toString()valueOf()
  • 所以我们通过构造函数实例化的对象是可以直接调用Object的方法的。
  • 我们可以看到其原型对象上也有一个constructor,根据我们上面说的,constructor会指向其构造函数本身。因此我们看到其指向了Object()构造函数

Object的原型对象指向哪儿

这个其实在各大学习资料里都有,最终Object原型对象指向了Null,也就到了终点。

至此生成的原型链

我们可以通过上面的分析看到,我们的实例会有一个内部属性指向构造它的函数的原型对象,而原型对象也是另一个函数构造的实例(Object),而这个构造的实例的原型最终又指向了终点Null。
这就通过prototype构成了一条链状结构。这就是我们常说的原型链。

OK。原型链今天就复习到这里哈。有任何错误和问题请及时联系我。谢谢!