原型链与构造函数

首先：声明的函数，是有prototype属性的。但是对象是没有prototype的。

一、函数

• console.dir(Foo)可以看到，有prototype属性和__proto__属性。
• Foo.prototype里的constructor指向Foo自己 , __proto__指向Object.prototype。
• 而Foo.__proto__指向Function.prototype

二、Object

• console.dir(Object)可以看到，有prototype属性和__proto__属性。
• Object.prototype里的constructor指向Object，__proto__指向null
• Object.__proto__指向Function.prototype。

三、Function 构造函数

• console.dir(Function)可以看到，有prototype属性和__proto__属性。
• Function.prototype里的constructor指向Function，__proto__指向Object.prototype
• Function.__proto__指向Function.prototype。

四、对象

1、字面量创建对象

• 字面量创建的对象__proto__的默认指向Object.prototype。
• 没有prototype属性。console.log(b.prototype) 结果undefined

2、构造函数创建对象

    function F () {}

    // 方法一：重写prototype
    F.prototype = {
      //constructor: F,
      name: 'liu',
      method: function () {}
    }

    // 方法二：拓展prototype
    F.prototype.name = 'yong';
    F.prototype.method = function () {};

    var f = new F();
    console.log(f);

• 构造函数创建对象：__proto__下有constructor和__proto__和Foo的prototype定义的属性及方法。
• __proto__下的constructor指向Foo本身。
• __proto__下的__proto__指向Object.prototype。

注意：

方法一：直接重写prototype，如果我不指定constructor，将导致如下图，没有了constructor。

方法二：拓展prototype，保证了constructor的正确指向。

五、附一张图对上面总结

作图工具采用processOn

六、附示例一份和图解

该示例原出处： Dmitry Soshnikov
参考翻译出处： 魏志峰（@JeremyWei）翻译+投稿

    function Foo(y) {
      this.y = y;
    }

    Foo.prototype.x = 10;

    Foo.prototype.calculate = function (z) {
      return this.x + this.y + z;
    };

    var b = new Foo(20);
    var c = new Foo(30);

    b.calculate(30); // 60
    c.calculate(40);