使用JavaScript如何实现寄生组合式继承-tutorial js-php.cn

使用JavaScript如何实现寄生组合式继承

亚连

Lepaskan： 2018-06-13 14:40:59

asal

1526 orang telah melayarinya

这篇文章主要介绍了JavaScript寄生组合式继承,结合实例形式详细分析了寄生组合式继承原理、实现方法与相关注意事项,需要的朋友可以参考下

本文实例讲述了JavaScript寄生组合式继承。分享给大家供大家参考，具体如下：

其实《JavaScript高级程序设计》这本书中已经有完整代码了，只要把代码读懂就知道这个继承是怎么回事。

首先，在js中，给对象定义属性有两种方式：

//通过执行构造函数设置属性
function A(){
  this.a = 1;
}
//通过原型设置属性
A.prototype.b = 1;

Salin selepas log masuk

所以：

一个类Sub要继承另一个类Super，需要继承父类的prototype下的属性，还要执行一下父类的构造函数。

即一个类Sub要继承另一个类Super，既要通过原型链实现对原型属性和方法的继承，又要通过在子类构造函数内调用父类构造函数实现对实例属性的继承。

1. 继承prototype下的属性

上面可以看到，Super类的prototype下的属性是没有被继承的，因此下面还需要继承这一部分。

直接「=」肯定不行，因为Sub.prototype中修改属性后，不能影响Super.prototype里面的对象，即不能Sub.prototype=Super.prototype。

首先写一个创建对象副本的方法

function object(o){
  function A(){}
  A.prototype = o
  var ox = new A()
  return ox
}

Salin selepas log masuk

上面的函数得到的对象ox，拥有了对象o的全部属性（在原型链上），而修改ox的属性，不会影响到o，相当于把o复制了一份。

原型式继承就是上面的“object”函数，在很多类库源码中都能发现它的身影

简单而言，原型式继承就是不用实例化父类了，直接实例化一个临时副本实现了相同的原型链继承。（即子类的原型指向父类副本的实例从而实现原型共享）

tips:总所周知，原型链继承是子类的原型指向父类的实例从而实现原型共享，而原型式继承是子类的原型指向父类副本的实例从而实现原型共享。

ECMAScirpt 5通过新增Object.create()方法规范化了原型式继承。

使用object方法，就可以将Super.prototype的属性「复制」到Sub.prototype上了，当然这儿还需要修正一下constructor的指向。

function inherit(subType,superType){
 var prototype=Object.create(superType.prototype);
 prototype.constructor=subType;
 subType.prototype=prototype;
}

Salin selepas log masuk

2. 分别执行父类和子类的构造函数，继承这部分下的属性：

//父类
function Super(){
this.sss=1
}
//子类
function Sub(){
//arguments是Sub收到的参数，将这个参数传给Super
Super.apply(this, arguments)
}
//实例
sub = new Sub()

Salin selepas log masuk

Super.apply(this, arguments)这一句，将Super类作为一个普通函数来执行，但是Super类的this被换成了Sub类的this，Sub收到的参数也传给了Super

最后执行结果相当于sub.sss=1

附上各种继承方式的特点和优缺点

曾经一段时间因为javascript关于类实现继承的不规范，导致各种各样实现继承的代码；而实际上不管代码怎么变，继承都基于两种方式：

1.通过原型链，即子类的原型指向父类的实例从而实现原型共享。
2.借用构造函数，即通过js的apply、call实现子类调用父类的属性、方法；

原型链方式可以实现所有属性方法共享，但无法做到属性、方法独享（例如Sub1修改了父类的函数，其他所有的子类Sub2、Sub3...想调用旧的函数就无法实现了）；

而借用构造函数除了能独享属性、方法外还能在子类构造函数中传递参数，但代码无法复用。总体而言就是可以实现所有属性方法独享，但无法做到属性、方法共享（例如，Sub1新增了一个函数，然后想让Sub2、Sub3...都可以用的话就无法实现了，只能Sub2、Sub3...各自在构造函数中新增）。

组合继承就是把以上两种继承方式一起使用，把共享的属性、方法用原型链继承实现，独享的属性、方法用借用构造函数实现，所以组合继承几乎完美实现了js的继承；为什么说是“几乎”？因为认(dan)真(teng)的geek们发现组合继承有一个小bug，实现的时候调用了两次超类（父类），性能上不合格啊有木有！怎么解决呢？于是“寄生继承”就出来了。

寄生继承（原型式继承）就是不用实例化父类了，直接实例化一个临时副本实现了相同的原型链继承。（即子类的原型指向父类副本的实例从而实现原型共享）

“寄生组合继承”用了“寄生继承”修复了“组合继承”的小bug，从而让js完美实现继承了。

实例代码：

function SuperType(name,colors){
  this.name=name;
  this.colors=colors;
}
SuperType.prototype.getSuperProperty=function(){ return this.name; }
function SubType(job,name,colors){
  SuperType.call(this,name,colors);
  this.job=job;
}
SubType.prototype.getSubPrototype=function(){ return this.job; }
function inherit(subType,superType){
  var prototype=Object.create(superType.prototype);
  prototype.constructor=subType;
  subType.prototype=prototype;
}
inherit(SubType,SuperType);
var instance=new SubType("doctor","John",["red","green"]);
console.log(instance.getSubPrototype());  //输出"doctor"
console.log(instance.getSuperProperty());  //输出"John"，成功调用在父类原型定义的方法

Salin selepas log masuk

属性继承代码是SuperType.call(this,name,colors);

原型继承代码是inherit(SubType,SuperType);

上面是我整理给大家的，希望今后会对大家有帮助。

在JS中如何实现碰撞检测

在angular1中如何配合gulp和bower来使用？

调试js脚本有哪些方法？

使用Angular如何实现搜索框

在vue中有关插值的详细介绍说明

Atas ialah kandungan terperinci 使用JavaScript如何实现寄生组合式继承. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!