图说原型链

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图说原型链相关的知识,希望对你有一定的参考价值。

前言

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




以上是关于图说原型链的主要内容,如果未能解决你的问题,请参考以下文章

图说区块链正确理解区块链能源消耗

图说区块链正确理解区块链能源消耗

图说区块链什么是企业级区块链?

图说区块链区块链技术:为数据经济而生

图说区块链企业级区块链的实用范例

图说区块链企业级区块链的实用范例