js原型链

原型链算是js中最基础的问题了，可是时间久了我有时候会混淆，为了下次可以快速回忆起来，特写此文章增强记忆！

简单了解一下构造函数

function Person() {
    //我是一个构造函数
}
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin
复制代码

至此，咱们已经建立了一个简单的构造函数 ---Person

同时咱们使用 new 建立了一个实例对象 ---person

很简单吧，接下来进入正题！

prototype属性

首先明确一点：每一个函数都有prototype属性，而且prototype属性是函数才会有的属性

function Person() {

}
Person.prototype.name = 'Kevin';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin
复制代码

思考一下构造函数Person的prototype指向什么呢？

其实prototype指向的是一个对象，这个对象就是调用构造函数Person的实例的原型。

换言之，构造函数Person的prototype指向的是实例person一、person2的原型。

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

在这张图中咱们用Object.prototype表示实例的原型

那么咱们应该如何表示实例（person1）与实例原型（Person.prototype）之间的关系呢?这就要讲到第二个属性了

__ proto __

首先明确一点: js中的每一个对象（除null之外）都有__proto__属性，该属性指向对象的原型。以下：

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true
复制代码

因而咱们更新下关系图：

从上图中能够看到构造函数和实例对象均可以指向实例原型，那么是否存在一个属性指向构造函数和实例对象呢？

constructor

指向实例对象的属性是没有的，由于一个构造函数能够有不少实例。可是！原型指向构造函数的却是有！这就要讲到第三个属性：

首先明确一点: 每一个原型都有一个constructor属性指向对应的构造函数

function Person() {

}
console.log(Person === Person.prototype.constructor); // true
复制代码

因此再更新下关系图：

了解了构造函数、实例原型、和实例之间的关系，接下来咱们讲讲实例和原型的关系：

实例与原型

当读取实例的属性时，若是找不到，就会查找与对象关联的原型中的属性，若是还查不到，就去找原型的原型，一直找到最顶层为止。

举个例子

function Person() {

}

Person.prototype.name = 'Kevin';

var person = new Person();

person.name = 'Daisy';
console.log(person.name) // Daisy

delete person.name;
console.log(person.name) // Kevin
复制代码

当咱们访问实例person的name属性时，顺利的找到person.name就是Daisy。可是当咱们删除person的name属性时， person 对象中找不到 name 属性，就会访问person实例的原型__proto__，也就是Person.prototype，顺利的找到了Kevin。

可是万一尚未找到呢？原型的原型又是什么呢？

原型的原型

原型也是一个对象，既然是对象，咱们就能够用最原始的方式建立它，那就是：

var obj = new Object();
obj.name = 'Kevin'
console.log(obj.name) // Kevin
复制代码

其实原型对象(__ proto __)就是经过 Object 构造函数生成的，结合以前所讲，实例的 proto 指向构造函数的 prototype ，因此咱们再更新下关系图：

原型链

那 Object.prototype 的原型呢？

console.log(Object.prototype.__proto__ === null) // true
复制代码

Object.prototype.proto 的值为 null 就表明 Object.prototype 没有原型。

因此查找属性的时候查到 Object.prototype 就能够中止查找了。

最终关系图为：

图中由相互关联的原型组成的链状结构就是原型链，也就是蓝色的这条线。

补充

constructor

function Person() {

}
var person = new Person();
console.log(person.constructor === Person); // true
复制代码

当获取 person.constructor 时，其实 person 中并无 constructor 属性,当不能读取到constructor 属性时，会从 person 的原型也就是 Person.prototype 中读取，正好原型中有该属性，因此：

person.constructor === Person.prototype.constructor
复制代码

真的是继承吗？

最后是关于继承，前面咱们讲到“每个对象都会从原型‘继承’属性”，实际上，继承是一个十分具备迷惑性的说法，引用《你不知道的JavaScript》中的话，就是：

继承意味着复制操做，然而 JavaScript 默认并不会复制对象的属性，相反，JavaScript 只是在两个对象之间建立一个关联，这样，一个对象就能够经过委托访问另外一个对象的属性和函数，因此与其叫继承，委托的说法反而更准确些。