图说原型链

前言

说到原型链，javascript 中，万物皆对象，而 javascript 规定，全部对象都有本身的原型对象(prototype) ，一方面，任何对象均可以充当其余对象的原型，另外一方面，原型（prototype）也是对象，也拥有本身的原型，所以造成的链就是原型链。到这里我就啰嗦几句，javascript 的设计者Brendan Eich在设计这门语言之初，只是想它在网页上实现简单的交互，好比表单提交前进行简单的校验，因此没有设计类与继承的概念，由于以为这样的话太正式了，可是受时代的影响，javascript里面都是对象，虽然没有继承，可是也要一种机制，把这些对象联系起来，这种机制就是原型链。话很少说，上图

图解

• 假设有一个内存空间（正方形表示），这片内存里放了一个构造函数Dog(用三角形表示)

function Dog () {
    this.leg = 4;
    this.bray = function () {
        alert('wangwang')；
    }
}

• 设置构造函数的原型函数（prototype）

Dog.prototype = {
    spacies: 'dog'
}
console.log(Dog.prototype)    // {spacies: 'dog'}

那么，就会在另一个内存中存储 Dog 的 prototype 对象（用椭圆形表示），如图所示，构造函数的protype指向它的原型

• 如今咱们用 构造函数 Dog 来建立对象 dog1, dog2, ...

var dog1 = new Dog();
dog1.name = '大黄';
dog1.color = 'yellow';

var dog2 = new Dog();
dog2.name = '小黑';
dog2.color = 'black';

console.log(dog1.name)     // 大黄
console.log(dog2.name)     // 小黑
console.log(dog1.spacies)  // dog
console.log(dog2.spacies)  // dog
console.log(dog1.constructor === Dog)   // true

能够看到由构造函数创造的对象dog1，dog2，他们的constructor指向构造函数Dog，而他们的__proto__指向Dog的prototype，并且当调用对象的一个属性或方法时，首先会找对象自己的属性或方法，找不到时，会找该对象的__proto__对象（也就是构造函数的prototype对象），以此类推，会找原型链上全部对象有没有该属性，若是找到则返回该属性的值，若是仍是找不到则返回undefined
另外能够看出来dog1，dog2，...的__proto__指向同一块内存地址，这样设计是为了节省内存资源,不用每次建立都存储他们相同的属性，当修改dog1的__proto__时，dog2的__proto__也会改变

dog1.__proto__.spacies = 'animal'; // 或者Dog.prototype.spacies = 'animal'
console.log(dog2.spacies)    // animal

• 上面也说到了，每个对象都有本身的__proto__，而做为构造函数Dog的prototype对象，也会有本身的对象原型，以此类推，原型链的顶端是一个null,如图的红线串起来的链就是原型链

额，来一个句话收尾吧，这是我本身对原型连的理解，欢迎探讨

参考

Javascript继承机制的设计思想
prototype 对象