原型和原型链

一、原型 prototype 和 proto

• 每个对象都有一个__proto__属性，并且指向它的prototype原型对象
• 每个构造函数都有一个prototype原型对象
  prototype原型对象里的constructor指向构造函数本身
  

prototype 和 __proto__有什么用呢？

• 实例对象的__proto__指向构造函数的prototype，从而实现继承
• prototype对象相当于特定类型所有实例对象都可以访问的公共容器

function Person(nick, age){
    this.nick = nick;
    this.age = age;
}
Person.prototype.sayName = function(){
    console.log(this.nick);
}

var p1 = new Person('Byron', 20);

var p2 = new Person('Casper', 25);

p1.sayName()  // Byron

p2.sayName()  // Casper

p1.__proto__ === Person.prototype       //true

p2.__proto__ === Person.prototype   //true

p1.__proto__ === p2.__proto__           //true

Person.prototype.constructor === Person  //true

注意

1. 当Object.prototype.proto 已被大多数浏览器厂商所支持的今天，其存在和确切行为仅在ECMAScript 2015规范中被标准化为传统功能，以确保Web浏览器的兼容性。为了更好的支持，建议只使用 Object.getPrototypeOf()。
2. Object.create(null) 新建的对象是没有__proto__属性的

二、原型链

var arr = [1,2,3]

arr.valueOf()  //  [1, 2, 3]

按照之前的理论，如果自身没有该方法，我们应该去Array.prototype对象里去找，但是你会发现arr.__proto__上压根就没有valueOf方法，那它是从哪里来的呢？

很奇怪我们在Array.prototype.__proto__里找到了valueOf方法，为什么呢？
查找valueOf方法的过程
当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

查找valueOf大致流程：

1、当前实例对象obj，查找obj的属性或方法，找到后返回
2、没有找到，通过obj. proto，找到obj构造函数的prototype并且查找上面的属性和方法，找到后返回
3、没有找到，把Array.prototype当做obj，重复以上步骤

当然不会一直找下去，原型链是有终点的，最后查找到Object.prototype时
Object.prototype.proto === null，意味着查找结束。

arr.__proto__ === Array.prototype
true
Array.prototype.__proto__ === Object.prototype
true
arr.__proto__.__proto__ === Object.prototype
true

// 原型链的终点
Object.prototype.__proto__ === null
true

原型链如下：

arr ---> Array.prototype ---> Object.prototype ---> null

这就是传说中的原型链，层层向上查找，最后还没有就返回undefined。

三、总结

• prototype 和 proto

每个对象都有一个__proto__属性，并且指向它的prototype原型对象
每个构造函数都有一个prototype原型对象
prototype原型对象里的constructor指向构造函数本身

• 原型链
  每个对象都有一个__proto__，它指向它的prototype原型对象，而prototype原型对象又具有一个自己的prototype原型对象，就这样层层往上直到一个对象的原型prototype为null。
  这个查询的路径就是原型链。