第一百一十八篇: JavaScript 原型链式继承

四囍

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

原型链是JS实现"继承"的方案之一
ECMA-262把原型链定义为ECMAScript的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。
重温一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指向原型。
如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数。
这样就在实例和原型之间构造了一条原型链。这就是原型链的基本构想。

1. <strong>function SuperType() {
2.     this.property = true;
3.   }
4.   SuperType.prototype.getSuperValue = function() {
5.     return this.property;
6.   };
7.   function SubType() {
8.     this.subproperty = false;
9.   }
10.   // 继承SuperType
11.   SubType.prototype = new SuperType();
12.   SubType.prototype.getSubValue = function () {
13.     return this.subproperty;
14.   };
15.   let instance = new SubType();
16.   console.log(instance.getSuperValue()); // true</strong>

复制代码

 

 
 
 
 
 
 
这个例子中实现继承的关键，是SubType没有使用默认原型，而是将其替换成了一个新的对象。
这个新的对象恰好是SuperType的实例。
这样一来，SubType的实例不仅能从SuperType的实例中继承属性和方法，而且还与SuperType的原型挂上了钩。
 
于是我们可以来看看他们的关系网

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

 
 
 
 
 
这样做有什么好处？
1.实现了继承
2.实例可以使用这个"链"上的所有内容，
特点：
1.就近原则，在读取实例上的属性时，首先会在实例上搜索这个属性。
如果没找到，则会继承搜索实例的原型。在通过原型链实现继承之后，搜索就可以继承向上，搜索原型的原型。
对属性和方法的搜索会一直持续到原型链的末端。
 
 
 
2.instanceof()方法和isPrototypeOf()方法

原型与实例的关系可以通过instanceof()方法和isPrototypeOf()方法来确定。
使用instanceof()方法检测实例的原型链中出现过相应的构造函数
使用isPrototypeOf()方法判断当前对象是否为另外一个对象的原型

1. <strong>function SuperType() {
2.     this.property = true;
3. }
5. function SubType() {
6.     this.subproperty = false;
7. }
9. // 继承SuperType
10. SubType.prototype = new SuperType();
12. let instance = new SubType();
14. console.log(instance instanceof Object);      
15. console.log(instance instanceof SuperType);   
16. console.log(instance instanceof SubType);     
18. console.log(Object.prototype.isPrototypeOf(instance));      
19. console.log(SuperType.prototype.isPrototypeOf(instance));  
20. console.log(SubType.prototype.isPrototypeOf(instance));     </strong>

复制代码

 

 
 
 (全对✔)
 
 
 
3.方法覆盖

子类有时需要增加父类没有的方法 (不然为什么会需要子类...)
也可以进行方法覆盖

1. <strong>function SuperType() {
2.     this.property = true;
3. }
4. SuperType.prototype.getSuperValue = function () {
5.     return this.property;
6. };
8. function SubType() {
9.     this.subproperty = false;
10. }
11. // 继承SuperType
12. SubType.prototype = new SuperType();
13. //新方法
14. SubType.prototype.getSuperValue = function () {
15.     return this.subproperty;
16. };
17. //覆盖已有的方法
18. SubType.prototype.getSuperValue = function () {
19.     console.log("getSubValue()方法已被覆盖")
20. };
22. let instance = new SubType();
24. console.log(instance.getSuperValue()); // false</strong>

复制代码

 

 
 
 
 
4.其它的继承方法

JavaScript继承（图解笔记） - 简书 (jianshu.com)
(写的挺好的,一篇直接看懂JS剩下的几种实现继承的方式)
 

来源:https://www.cnblogs.com/FatTiger4399/p/17010946.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！