图说原型链

最新推荐文章于 2022-04-02 22:23:21 发布

转载最新推荐文章于 2022-04-02 22:23:21 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000014961257

文章标签：

#javascript #ViewUI

本文深入浅出地介绍了JavaScript中的原型链机制，通过实例演示了如何使用构造函数和原型对象，并解释了对象查找属性的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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