前提

new 一下,发生了什么?

  1. function A(){
  2. this.name = 'kavin'
  3. }
  4. var a = new A();
  1. 创建一个新对象;
  1. var a = new Object() // {};
  1. 将构造函数的作用域赋给新对象(因此this就指向了这个对象);


  1. a.constructor = A; // a.constructor.call(a)
  2. a.__proto__ = A.prototype
  1. 执行构造函数中的代码(为这个新对象添加属性);
  1. a.constructor()
  1. 返回新对象。


  1. return a


总体来看,是这样:

  1. var a = (function(name) {
  2. var new_a = { =
  3. constructor: A,
  4. __proto__: A.prototype,
  5. };
  6. new_a.constructor(name);
  7. return new_a;
  8. })();

基础

prototype

在JavaScript中,每个函数都有一个prototype属性,这个属性指向函数的原型对象。

例如:

  1. function Person(age) {
  2. this.age = age
  3. }
  4. Person.prototype.name = 'kavin'
  5. var person1 = new Person()
  6. var person2 = new Person()
  7. console.log(person1.name) //kavin
  8. console.log(person2.name) //kavin

上述例子中,函数的prototype指向了一个对象,而这个对象正是调用构造函数时创建的实例的原型,也就是person1和person2的原型。

什么是原型?看下面代码。

  1. function Person(age) {
  2. this.age = age
  3. }
  4. Person.prototype.name = 'kavin'
  5. var person1 = new Person()
  6. person1.name = "jake"
  7. var person2 = new Person()
  8. console.log(person1.name) //jake
  9. console.log(person2.name) //kavin

上面的例子反映出一个问题:通过 new 之后,生成了一个新的 Person 实例(copy了一份),所以使用person1.name = “jake” 并不影响 Person 本身。这也是构造函数的最大用途——复用性。

原型的概念:每一个javascript对象(除null外)创建的时候,就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型中“继承”属性。

让我们用一张图表示构造函数和实例原型之间的关系:

原型链 - 图1

proto

这是每个对象(除null外)都会有的属性,叫做proto,这个属性会指向该对象的原型。


  1. function Person() {
  2. }
  3. var person = new Person();
  4. console.log(person.__proto__ === Person.prototype); // true

我们再来试试这个:

  1. function Person() {
  2. }
  3. var person = new Person();
  4. console.log(person.__proto__ === Person.prototype, person.prototype, Person.__proto__);
  5. // true undefined ƒ(){ [native code] }

也就是说,函数实例化以后他就没有 prototype 属性了,换个角度理解,实例化以后就变成对象了,因为 prototype 只有函数对象具备。 但是任何对象都有 proto 属性,函数的 proto 是一个匿名函数。

而关系图:
原型链 - 图2
补充说明:

绝大部分浏览器都支持这个非标准的方法访问原型,然而它并不存在于 Person.prototype 中,实际上,它是来自于 Object.prototype ,与其说是一个属性,不如说是一个 getter/setter,当使用 obj.proto 时,可以理解成返回了 Object.getPrototypeOf(obj)。

constructor

每个原型都有一个constructor属性,指向该关联的构造函数。


  1. function Person() {
  2. }
  3. console.log(Person===Person.prototype.constructor) //true

所以再更新下关系图:
原型链 - 图3

  1. function Person() {
  2. }
  3. var person = new Person();
  4. console.log(person.__proto__ == Person.prototype) // true
  5. console.log(Person.prototype.constructor == Person) // true

补充说明:

  1. function Person() {
  2. }
  3. var person = new Person();
  4. console.log(person.constructor === Person); // true

当获取 person.constructor 时,其实 person 中并没有 constructor 属性,当不能读取到constructor 属性时,会从 person 的原型也就是 Person.prototype 中读取,正好原型中有该属性,所以:person.constructor === Person.prototype.constructor

总结

有点绕,我们来总结一下,一下面代码魏基础我们依次解释:

  1. function A(){
  2. }
  3. // a 是 A 的实例对象,我们将 A 叫做构造函数,那么 a 就是 A 构造出来的。
  4. // 构造后 a 就不是一个函数对象了,而是一个实例对象。
  5. var a = new A()
  6. // __proto__ 指向对象的实例原型,对象有,函数也有。
  7. // 函数的 __proto__ (实例原型)指向一个匿名函数。但是实例对象的 prototype 是 undefined。
  8. // 函数通过 prototype 指向实例原型,对象通过 __proto__ 指向实例原型。
  9. a.__proto__ === A.prototype;
  10. // 纯对象的 __proto__ 指向 Object() 构造函数(Js 底层实现的)……(是否已经明白为啥一切皆对象了)
  11. var b = {};
  12. b.__proto__ === Object.prototype;
  13. var c = [];
  14. c.__proto__ === Array.prototype;
  15. ……
  16. // 同理,因为按照上面的理解没有办法写 function.prototype (语法不符)。
  17. // 但我们仍旧可以通过 debugger 看到 d.__proto__ 指向一个匿名函数。
  18. var d = function(){}
  19. // 我们发现 a.constructor 和 a.__proto__.constructor 都指向 A ,
  20. // 说明中间跳过__proto__ 去找 constructor 是自动的这就是原型链,请接着看下一节。
  21. // (我们同时可以得出以下结论)
  22. a.constructor === A;
  23. a.__proto__.constructor === A;
  24. a.__proto__ === A.prototype;
  25. A.prototype.constructor === A;

高级部分

实例与原型

当读取实例(对象)的属性时,如果找不到,就会查找与实例(对象)关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止( proto === Object)。

  1. function Person() {
  2. }
  3. Person.prototype.name = 'Kevin';
  4. var person = new Person();
  5. person.name = 'Daisy';
  6. console.log(person.name) // Daisy
  7. delete person.name;
  8. console.log(person.name) // Kevin

在这个例子中,我们给实例对象 person 添加了 name 属性,当我们打印 person.name 的时候,结果自然为 Daisy。

但是当我们删除了 person 的 name 属性时,读取 person.name,从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.proto ,也就是 Person.prototype中查找,幸运的是我们找到了 name 属性,结果为 Kevin。

但是万一还没有找到呢?原型的原型又是什么呢?

原型的原型

在前面,我们已经讲了原型也是一个对象,既然是对象,我们就可以用最原始的方式创建它,那就是:

  1. var obj = new Object();
  2. obj.name = 'Kevin'
  3. console.log(obj.name) // Kevin

其实原型对象就是通过 Object 构造函数生成的,结合之前所讲,实例的 proto 指向构造函数的 prototype ,所以我们再更新下关系图:
原型链 - 图4

可以翻到内容前提 去看看 new 字段会发生什么。

原型链

简单的回顾一下构造函数、原型和实例的关系:

每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例对象都包含一个指向原型对象的内部指针。

那么假如我们让原型对象等于另一个类型的实例,结果会怎样?显然,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。

假如另一个原型又是另一个类型的实例,那么上述关系依然成立。如此层层递进,就构成了实例与原型的链条。这就是所谓的原型链的基本概念。

——摘自《javascript高级程序设计》

其实简单来说,就是上述四-五的过程。

继上述五中所说,那 Object.prototype 的原型呢?

引用阮一峰老师的 《undefined与null的区别》 就是:

null 表示“没有对象”,即该处不应该有值。

所以 Object.prototype.proto 的值为 null 跟 Object.prototype 没有原型,其实表达了一个意思。
所以查找属性的时候查到 Object.prototype 就可以停止查找了。

最后一张关系图也可以更新为:
原型链 - 图5
图中由相互关联的原型组成的链状结构就是原型链,也就是蓝色的这条线。