原型链这样还搞不懂，拿砖拍你自己吧，别拍我

很多初学者接触原型链总以为很难，很高大上，其实不然，只要是搞懂几个属性，原型链就可明明白白的理解

构造函数

当我们创建 对象时，我们需要定义构造函数。

构造函数 有什么特殊吗？然而并没有，就是普通的函数，只不过是我们人为的将首字母变为大写。当我们创建对象时，在执行构造函数前 加 new后得到 对象实例,这时候就有 原型链的 故事了。

function Foo(name) {
     this.name = name;
     this.nationality = "中国"
}

let foo = new Foo("胡三疯");
console.log(foo.name)

prototype （原型属性）

上述 构造函数 创建后，我们就可以开开心心的创建对象：

function Foo(name) {
     this.name = name;
     this.nationality = "中国"
 }

 let foo1 = new Foo("胡三疯");
 let foo2 = new Foo("胡小疯");

在开心之余，你会不会上述代码有点问题，在我们创建对象foo1和foo2时，属性nationality都是一模一样的内容，每一次生成一个实例，都必须为重复的内容，多占用一些内存,同样效率肯定也会降低，这只是一个属性，如果属性和方法较多时，内存消耗肯定会更大，那这个问题如何 解决？

在定义函数时，函数会有个prototype属性，也就是我们所说的：原型。

我们可以将一些公共的属性（比如：nationality ）和方法，赋值给函数原型，当我们创建对象时，就可以直接访问prototype中的属性和方法。这样就解决了 内存占用问题，因为绑定在 原型 上属性和 方法不会在我们创建对象实例时被重复创建。

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

Foo.prototype.nationality = "中国"
let foo = new Foo("胡三疯");
console.log(foo.nationality)

其实，prototype属性，在我们定义 构造函数 后就会有，本质上是一个对象，里面有一些自有的属性和方法。当然我们也可以重新执行prototype，只需要重新赋值即可，如下，但是我认为在实际应用不必要，也不要去改，直接作为属性赋值不香吗？。

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

Foo.prototype = {
    nationality: "中国" 
}

let foo = new Foo("胡三疯");
console.log(foo.nationality)

__proto__

为啥 上述对象 可以直接访问 原型 中属性和方法？

因为在 实例 对象中有 __proto__ （就是我们平时常说的原型链，个人认为不应该叫原型链，应该 原型链的连接点）属性，它所指向的 正是 原型prototype 。

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

Foo.prototype.nationality = "中国"
let foo = new Foo("胡三疯");
console.log(Foo.prototype == foo.__proto__)   // true 

原型链的顶层

大家肯定听说过：一句话交最顶层的原型是 null。

那么下面我们用个例子说明：

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

let foo = new Foo("胡三疯");
console.log(Foo.prototype == foo.__proto__)

// Foo.prototype 是个对象，那么肯定也有 __proto__
console.log(Foo.prototype.__proto__ == Object.prototype)  // true

console.log(Object.prototype.__proto__)   // null

Foo原型 的原型是 Object.prototype,而Object.prototype的原型是 null。

原型链

虽然 我们已经知道了 原型 相关的知识，如果 问你 啥叫原型链 ？ 这个问题该如何作答：

原型链：以 对象 为基准， 以__proto__为节点，至到 null 的一条联调。

上边这句话可能不太好理解，我们举个例子：

function Foo() {
    this.a = 1;
}

Foo.prototype.b = 2

Object.prototype.c  = 3

let foo = new Foo();

console.log(foo.a, foo.b, foo.c);  // 1 2 3 

下面我们将 对象foo的原型链写一下：

//    foo: {
//        a: 1,
//        __proto__: Foo.prototype = {
//            b: 2,
//            __proto__: Object.prototype = {
//                c: 3,
//                __proto__: null
//            }
//        }
//    }

当我们分别访问属性时：
当访问 foo.a时，直接在foo对象中找到；当访问 foo.b时，对象foo访问__proto__,__proto__指向Foo.prototype,Foo.prototype对象中有 b属性； 当访问 foo.c时,原理是一样的。

由此当对象访问属性或调用方法时，就会沿着原型链一直往上找直至找到位置；若找不到就返回undefined。

Function 和 Object 的原型

Function 和 Object 的原型稍微有点特殊，因为它们本身是 函数但是又是对象

function Foo() {
    this.a = 1;
}

// 任何函数的原型都是  Function.prototype 
console.log(Foo.__proto__ == Function.prototype)

// function -> Object
console.log(typeof Function)

console.log(Function.__proto__)
console.log(Function.prototype)

console.log(Function.__proto__ == Function.prototype)  // true

因为所有的函数，全部都是 Function 实例化而来。那么Foo.__proto__ == Function.prototype，Function 类型是function,那么也就是 对象，按照道理来说 Function应该有原型，其原型是Function.prototype,这个其实是JS本身定义好的，我们也无需多纠结。

let obj = new Object()     // function
console.log(Object.__proto__ == Function.prototype)  // true

从 new Object()可知，Object 也是一个函数，我们知道Function 是所有函数的构造函数，那么就会有 Object.__proto__ == Function.prototype

因此你观察Function.__proto__和Object.__proto__你会猛然发现他们两个是一样的。

Function.__proto__  == Object.__proto__

constructor

constructor 是实例对象的构造函数， 仅此而已，有些博客写原型链的时候经常把constructor 带上，搞的原型链和constructor 有关一样，也使得初学者很迷茫。 本质上讲原型链只和 __proto__有关。

参考资料

• js为什么会用原型模式