首页IT科技js原型链理解（第一百一十八篇: JavaScript 原型链式继承）

js原型链理解（第一百一十八篇: JavaScript 原型链式继承）

时间2025-05-05 13:20:56分类IT科技浏览4166
导读：好家伙，好家伙，本篇为《JS高级程序设计》第八章“对象、类与面向对象编程”学习笔记...

好家伙            ，好家伙                  ，本篇为《JS高级程序设计》第八章“对象            、类与面向对象编程            ”学习笔记

1.原型链

原型链是JS实现"继承"的方案之一

ECMA-262把原型链定义为ECMAScript的主要继承方式            。其基本思想就是通过原型继承多个引用类型的属性和方法                  。

重温一下构造函数                  、原型和实例的关系：每个构造函数都有一个原型对象      ，原型有一个属性指回构造函数         ，而实例有一个内部指针指向原型      。

如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型                  ，相应地另一个原型也有一个指针指向另一个构造函数         。

这样就在实例和原型之间构造了一条原型链                  。这就是原型链的基本构想         。

这个例子中实现继承的关键         ，是SubType没有使用默认原型      ，而是将其替换成了一个新的对象      。

这个新的对象恰好是SuperType的实例                  。

这样一来                  ，SubType的实例不仅能从SuperType的实例中继承属性和方法            ，而且还与SuperType的原型挂上了钩            。

于是我们可以来看看他们的关系网

实际上   ，原型链中还有一环   。默认情况下                  ，所有引用类型都继承自Object               ，这也是通过原型链实现的                  。完整的继承链

这样做有什么好处？

1.实现了继承

2.实例可以使用这个"链"上的所有内容，

特点：

1.就近原则               ，在读取实例上的属性时                  ，首先会在实例上搜索这个属性               。

如果没找到   ，则会继承搜索实例的原型。在通过原型链实现继承之后            ，搜索就可以继承向上                  ，搜索原型的原型               。

对属性和方法的搜索会一直持续到原型链的末端                  。

2.instanceof()方法和isPrototypeOf()方法

原型与实例的关系可以通过instanceof()方法和isPrototypeOf()方法来确定   。

使用instanceof()方法检测实例的原型链中出现过相应的构造函数

使用isPrototypeOf()方法判断当前对象是否为另外一个对象的原型

function SuperType() { this.property = true; } function SubType() { this.subproperty = false; } // 继承SuperType SubType.prototype = new SuperType(); let instance = new SubType(); console.log(instance instanceof Object); console.log(instance instanceof SuperType); console.log(instance instanceof SubType); console.log(Object.prototype.isPrototypeOf(instance)); console.log(SuperType.prototype.isPrototypeOf(instance)); console.log(SubType.prototype.isPrototypeOf(instance));

(全对✔)

3.方法覆盖

子类有时需要增加父类没有的方法 (不然为什么会需要子类...)

也可以进行方法覆盖

function SuperType() { this.property = true; } SuperType.prototype.getSuperValue = function () { return this.property; }; function SubType() { this.subproperty = false; } // 继承SuperType SubType.prototype = new SuperType(); //新方法 SubType.prototype.getSuperValue = function () { return this.subproperty; }; //覆盖已有的方法 SubType.prototype.getSuperValue = function () { console.log("getSubValue()方法已被覆盖") }; let instance = new SubType(); console.log(instance.getSuperValue()); // false

4.其它的继承方法

JavaScript继承（图解笔记） - 简书 (jianshu.com)

(写的挺好的,一篇直接看懂JS剩下的几种实现继承的方式)

声明：本站所有文章      ，如无特殊说明或标注         ，均为本站原创发布            。任何个人或组织                  ，在未征得本站同意时         ，禁止复制      、盗用         、采集                  、发布本站内容到任何网站         、书籍等各类媒体平台                  。如若本站内容侵犯了原著者的合法权益      ，可联系我们进行处理      。

创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！

展开全文READ MORE
优化网站排名提高（提升网站排名的SEO优化方法大揭秘）
↑