轻松理解JavaScript原型到原型链

说到原型和原型链可能对于每个js初学者都是一件非常头疼的事，因为它们之间的关系太绕了，网上的相关文章也是不计其数。本文将从另一个角度去理解什么是原型和原型链。

我们先认识一下什么是实例和构造函数吧。

构造函数创建对象

我们先使用构造函数创建一个对象：

// 构造函数使用的是大驼峰式写法(首字母大写)

    function Person() {

    };

    var person = new Person();

    person.name = 'charming';

    console.log(person.name);

复制代码

在这个例子中 Person 就是构造函数，而声明的这个 person 就是对象实例。

接下来就进入主题：

prototype

每个函数都有prototype属性，我们会在各种例子上见到它的身影，比如：

function Person() {

};

//需要注意的是只有函数才有prototype属性
Person.prototype.name = 'charming';

var person1 = new Person();
var person2 = new Person();

console.log(person1.name); // 'charming'

console.log(person2.name); // 'charming'

复制代码

那函数的prototype属性到底指向谁呢？是这个函数的原型吗？

其实，这个函数的prototype指向的是一个对象，这个对象正是调用该构造函数创建的 实例 的原型，也就是这个例子中的person1和person2的原型。

那原型是什么呢？我们这样理解： 每个JavaScript对象(null除外)创建的时候会与之关联另一个对象，这个对象就是我们所说的 ****，每个对象都会从原型上”继承“属性。** 让我们用一张图来表示构造函数和实例原型之间的关系：

在这张图中我们用Object.prototype来表示实例原型。 那我们该怎么表示实例和实例原型，也就是person和Person.prototype之间的关系呢，这就用到我们要讲的的第二个属性了：

proto

每个JavaScript对象（null除外）都具有的一个属性，叫 _proto_ 这个属性会指向该对象的原型。 为了证明这一点我们可以在火狐或者谷歌中测试一下

function Person() {

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

现在我们再来更新一下关系：

既然实例和构造函数都可以指向原型，那原型是否有属性指向构造函数或者实例呢？

constructor

指向实例倒是没有，因为一个构造函数可以生成多个实例，但是原型指向构造函数倒是可以，这就是我们要说的第三个属性：constructor，每个对象都有一个 constructor 属性指向关联的构造函数。 为了验证这一点我们可以尝试一下：

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

所以我们就再更新一下关系图：

综上我们得出：

function Person() {
};
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true
console.log(Person.prototype.constructor === Person) // true
// 顺便用一个es5的方法，用于获取对象原型
console.log(Object.getPrototypeOf(person) === Person.prototype); // true
复制代码

了解了构造函数，实例原型，和原型之间的关系，接下来我们就说一下实例和原型之间的关系：

实例与原型

当读取实例的属性时，如果找不到 就会向与实例关联的原型的属性上查找，一直找到最顶层为止。 举个例子：

function Person() {
};
Person.prototype.name = 'charming'
var person = new Person();
person.name = 'Lyh';
console.log(person.name) // 'Lyh'
delete person.name
console.log(person.naem) // 'charming'
复制代码

这个例子中我们给person添加了一个name属性，当我们打印preson.name这个属性是当然是 'Lyh' ，但是当我删除了person自身的nama属性是，再去访问这个name属性时， 但是当我们删除了 person 的 name 属性时，读取 person.name，从 person 对象中找不到 name 属性就会从 person 的原型也就是 person. __proto__ ，也就是 Person.prototype中查找，幸运的是我们找到了 name 属性，结果为 'charming'。 如果还是没找到呢？原型的原型又是什么呢？

原型的原型

在前面我们也说了原型也是一个对象，既然是对象，我们就用最原始的方法创建它。例如：

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

其实原型对象就是通过Object构造函数生成的，结合之前所说的，实例的 __proto__ 指向构造函数的prototype，所以我们再更新一下关系图：

原型链

那Object.prototype的原型呢？ 其实就是null了，我们可以打印一下：

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

那 null 究竟代表了什么呢？ 引用阮一峰老师的 《undefined与null的区别》 就是： null表示“没有对象”，即该处不应该有值。 所以Object.prototype. __proto__ 的值为null跟Object.prototype没有原型，其实表达了一个意思。 所以查找属性的时候查到Object.prototype就可以停止了。 最后我们再更新一下关系图：

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

补充一下

constructor

首先是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
复制代码

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

这篇文章呢是我在另一片文章上收获的觉得很好理解。就分享给你们了。 不喜勿喷！

原文地址： github.com/mqyqingfeng…