js中继承的几种用法总结

迈不过友情╰ 2022-07-17 04:07 172阅读 0赞

`js`里常用的如下两种继承方式：

`原型链继承（对象间的继承）`

`类式继承（构造函数间的继承）`

## 类式继承 ##

**`类式继承`**是在子类型构造函数的内部调用超类型的构造函数。  
严格的类式继承并不是很常见，一般都是组合着用：

function Super(){ this.colors=["red","blue"]; } function Sub(){ Super.call(this); }

## 原型链继承 ##

`原型式继承是借助已有的对象创建新的对象，将子类的原型指向父类，就相当于加入了父类这条原型链`

为了让子类继承父类的属性（也包括方法），首先需要定义一个构造函数。然后，将父类的新实例赋值给构造函数的原型。代码如下：

以上原型链继承还缺少一环，那就是`Object`，所有的构造函数都继承自`Object`。而继承`Object`是自动完成的，并不需要我们自己手动继承，那么他们的从属关系是怎样的呢？

### 确定原型和实例的关系 ###

可以通过两种方式来确定原型和实例之间的关系。操作符`instanceof`和`isPrototypeof()`方法：

alert(brother instanceof Object)//true alert(test instanceof Brother);//false,test 是brother的超类 alert(brother instanceof Child);//true alert(brother instanceof Parent);//true

只要是原型链中出现过的原型，都可以说是该原型链派生的实例的原型，因此，`isPrototypeof()`方法也会返回`true`

在`js`中，被继承的函数称为超类型（父类，基类也行），继承的函数称为子类型（子类，派生类）。

使用原型继承主要由两个问题：  
一是**字面量重写原型**会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。

伪类解决引用共享和超类型无法传参的问题，我们可以采用“**借用构造函数**”技术

### 借用构造函数（类式继承） ###

借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起，所以我们需要`原型链+借用构造函数`的模式，这种模式称为**组合继承**

### 组合继承 ###

组合式继承是比较常用的一种继承方法，其背后的思路是 使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又保证每个实例都有它自己的属性。

`call()`的用法：调用一个对象的一个方法，以另一个对象替换当前对象。

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

## 原型式继承 ##

这种继承借助原型并基于已有的对象创建新对象，同时还不用创建自定义类型的方式称为`原型式继承`

原型式继承首先在`obj()`函数内部创建一个临时性的构造函数 ，然后将传入的对象作为这个构造函数的原型，最后返回这个临时类型的一个新实例。

### 寄生式继承 ###

这种继承方式是把原型式+[工厂模式][Link 1]结合起来，目的是为了封装创建的过程。

### 组合式继承的小问题 ###

组合式继承是`js`最常用的继承模式，但组合继承的超类型在使用过程中会被调用两次；一次是创建子类型的时候，另一次是在子类型构造函数的内部

以上代码是之前的组合继承，那么寄生组合继承，解决了两次调用的问题。

### 寄生组合式继承 ###

## call和apply ##

全局函数`apply`和`call`可以用来改变函数中`this`的指向，如下：

// 定义一个全局函数 function foo() { console.log(this.fruit); } // 定义一个全局变量 var fruit = "apple"; // 自定义一个对象 var pack = { fruit: "orange" }; // 等价于window.foo(); foo.apply(window); // "apple",此时this等于window // 此时foo中的this === pack foo.apply(pack); // "orange"

[Link 1]: http://segmentfault.com/blog/trigkit4/1190000000662547#articleHeader15