图说原型链

WelliJhon 发布于2019-08-22 17:26 / 1082人阅读

摘要：前言说到原型链，中，万物皆对象，而规定，所有对象都有自己的原型对象，一方面，任何对象都可以充当其他对象的原型，另一方面，原型也是对象，也拥有自己的原型，因此形成的链就是原型链。

前言

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

GPU云服务器云服务器图说区块链原型原型链原型链原型链继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95160.html

图说原型链

摘要：前言说到原型链，中，万物皆对象，而规定，所有对象都有自己的原型对象，一方面，任何对象都可以充当其他对象的原型，另一方面，原型也是对象，也拥有自己的原型，因此形成的链就是原型链。前言说到原型链，javascript 中，万物皆对象，而 javascript 规定，所有对象都有自己的原型对象(prototype) ，一方面，任何对象都可以充当其他对象的原型，另一方面，原型（protot...

Shonim 2019-08-02 10:30 评论0 收藏0
Javascript 原型链

摘要：先来一张图看看几个名词的关系构造函数原型实例原谅我的狂草字体，我手写比用电脑画快。今天我们只说原型链，所以接下来我就围绕着原型链的几个部分说起。每个函数都有一个属性借用属性存储了的原型对象。先来一张图看看几个名词的关系构造函数、原型、实例 showImg(https://segmentfault.com/img/remote/1460000018194082); 原谅我的狂草字体，...

nanfeiyan 2019-08-23 15:17 评论0 收藏0
图说 WebAssembly（五）：高性能原因

摘要：本文是图说系列文章的第五篇。这样的话，使用的开发者也不需要做任何适配，但是它们却能获得更高性能。该图并不是用来准确的衡量其性能的。运行编写出高性能的代码是可能的。这种清理工作由引擎自动进行，称为垃圾回收。本文是图说 WebAssembly 系列文章的第五篇。如果您还未阅读之前的文章，建议您从第一篇入手。在上一篇文章中，我们说到了使用 WebAssembly 和 JavaScript...

seal_de 2019-08-22 16:59 评论0 收藏0
图说 WebAssembly（四）：快速入门

摘要：本文是图说系列文章的第四篇。它们表示一种可以在普遍流行机器上高效使用的指令集合。这是因为是一种称为堆栈机器。尽管是根据堆栈机器来设计的，但是这并不是它在真实物理机器上工作的方式。这些内容称为段。本文是图说 WebAssembly 系列文章的第四篇。如果您还未阅读之前的文章，建议您从第一篇入手。 WebAssembly 是一种使得除 JavaScript 以外的编程语言也能运行在网页上...

BoYang 2019-08-22 17:00 评论0 收藏0
图说 Firefox 全新 CSS 引擎

摘要：的主要组件包含了一个全新的引擎，称为量子，也称为。这个新引擎集成了四种不同浏览器的最新创新技术，创造出一个全新的超级引擎。这可以发生在多个图层上。最终，拥有最高特异性的规则会胜出。原文：Inside a Super Fast CSS Engine: Quantum CSS(Aka Stylo), Lin Clark 注：原文发布于 2017 年 8 月，本文翻译于 2018 年 4 ...

lsxiao 2019-08-29 15:06 评论0 收藏0