天天看点

一文详解JavaScript的继承模式

#### ES6中通过原型继承多个引用类型的属性和方法,由于原型和实例的关系,即每个构造函数都有自己的原型对象,同时原型有一个属性指向构造函数,并且实例有一个内部的指针指向原型。如果存在某原型是另一个类型的实例时,以此类推。便形成了原型链。

-实现原型链的基本代码模式:

function SubType(){}

SubType.prototype.getValue = function(){}

此时,函数SubType的原型上边定义了一个方法 getValue 在下一步进行实例化的时候,便可以通过这个方法访问函数上的相关属性。

同时,一个函数或者方法的原型可以继承自另外一个函数或者类的实例。

例如:

function SonType(){}

继承自SubType

SonType.prototype  = new SubType();

例:

function SuperType(){

this.color = ['red','blue','green']

}

继承自SuperType

function SubType(){  SuperType.call(this) }

let instance = new SubType();

instance.color.push("skyblue)

console.log(instance.color)  red,blue,green,skyblue;

此种方式的优点在于能够在子类的构造函数当中向父类的构造函数传递参数。

SuperType.call(this,'此处传递参数')

缺点在于必须在构造函数中定义方法,函数无法重用,同时子类也无法访问父类原型上的定义的方法。

组合式继承模式

该继承综合了原型链和盗用构造函数继承:将优点集中到一起。

基本思路:通过原型链继承原型上的属性和方法,通过盗用构造函数继承实例属性。

实例代码:

SuperType.prototype.sayName = function(){

function SubType(name,age){

SubType.ptototype = new SuperType();

SubType.prototype.sayAge = function(){

该继承模式弥补了原型链继承和盗用构造函数继承的不足,是使用最多的继承模式,同时还保留了instanceof操作符和isPrototypeOf()方法。

原型式继承

function object(o) {

当只有一个参数时,同上文定义的object函数功能相同。寄生式继承

function createAnother(origin){

思路类似于:寄生构造函数和工厂模式。创建一个实现继承的函数,以某种方式增强这个对象,最后返回。寄生式组合继承

function SuperType(name){

SubType.prototype = new SuperType();第一次调用SuperType()

SubType.prototype.constructor = SubType;

function inheritPrototype(subType,superType){

通过这种方式 只需要调用一次SuperType构造函数效率更高,原型键依然保持不变,同时instance操作符和isProtoTpe方法正常有效。

继续阅读