图说原型链

Posted 2020-11-22 baimeishaoxia

前言

说到原型链，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 对象