js实现继承的方式

一只小灰狼
221 阅读5分钟

1. 原型链继承

原型链的概念：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么我们让原型对象的实例（1）等于另一个原型对象（2）,此时原型对象（2）将包含一个指向原型对象（1）的指针，再让原型对象（2）的实例等于原型对象（3），如此层层递进就构成了实例和原型的链条，这就是原型链的概念。

原型链继承的实现方式：

function SuperType(){
    this.prop = true;
}
SuperType.prototype.getSuperValue = function(){
    return this.prop;
}
function subType(){
    this.subprop = false;
}
//让SubType的原型对象等于SuperType的实例，从而实现继承SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function(){
    return this.subprop;
}
var instance = new SubType();
console.log(instance.getSuperValue()); //true

解析：instance是SubType的实例，SubType继承了SuperType，由于instance和SubType.prototype都没有getSuperValue函数，故继续搜索到SuperType.prototype,找到getSuperValue函数，SuperType.prototype.getSuperValue函数返回的是SuperType.prototype的prop的值，SuperType.prototype里的属性prop为true，所以最终打印的结果是true.

原型链继承的弊端：
1、原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改；
2、新实例无法向父类构造函数传参。

2. 借用构造函数

为了解决原型链方式的两个弊端，使用借用构造函数方式。

实现方式：

function SuperType(name){
    this.name = name;
    this.arr = [1,2,3];
}
function SubType(age){
  SuperType.call(this,'Xiaoming');  //实现继承并传参
  this.age = age;
}

var instance1 = new SubType(27);
instance1.arr.push(4);
console.log(instance1.arr);//[1,2,3,4]
console.log(instance1.name);//'Xiaoming'

var instance2 = new SubType(28);
console.log(instance2.arr);//[1,2,3]
console.log(instance2.age);//28

解析：SuperType.call(this,'Xiaoming')这一行代码“借调”了SuperType构造函数，通过使用call方法，实际上在SubType实例的环境下调用了SuperType构造函数。这样就会在SubType对象上执行SuperType()函数中定义的所有对象初始化代码。于是SubType的每个实例就都会有自己的arr和name属性的副本了。

特点：只继承了父类构造函数的属性，没有继承父类原型的属性。

缺点：1、只继承了父类构造函数的属性，没有继承父类原型的属性。

   2、无法实现构造函数的复用。（每次都要重新调用）

   3、每个新实例都有父类构造函数的副本，臃肿。    

3. 组合继承

使用原型链实现对原型属性和方法的继承，通过借用构造函数实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又能保证每个实例都有它自己的属性。

实现方式：

function SuperType(name){
    this.name = name;
    this.arr = [1,2,3];
}
SuperType.prototype.sayName = function(){
  console.log(this.name)
}
function SubType(name,age){
  SuperType.call(this, name);  //继承属性
  this.age = age;
}
//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
  console.log(this.age)
}

var instance1 = new SubType('Xiaoming',27);
instance1.arr.push(4);
console.log(instance1.arr);//[1,2,3,4]
console.log(instance1.sayName());//'Xiaoming'
console.log(instance1.sayAge());//27

var instance2 = new SubType('Xiaoli',28);
console.log(instance2.arr);//[1,2,3]
console.log(instance2.sayName());//'Xiaoli'
console.log(instance2.sayAge());//28

缺点：调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数。

4. 原型式继承

实现方式：

function object(o){
  function F(){}
  F.prototype = o;
  return new F()
}

var person1 = {
  name:'Xiaoming',
  arr:[1,2,3]
}

var person2 = object(person1);
person2.name = 'Xiaohong';
person2.arr.push(4);

var person3 = object(person1);
person3.name = 'Xiaoli';
person3.arr.push(5);

console.log(person1.arr); //[1,2,3,4,5]

解析：在object()函数内部，先创建了一个临时构造函数，然后将传入的对象作为这个构造函数的原型，最后返回这个临时类型的一个实例。所以，其实是object()对传入的对象进行了一次浅复制。

缺点：1、所有实例都会继承原型上的属性。

   2、无法实现复用。（新实例属性都是后面添加的）

5. 寄生式继承

创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真的做了所有工作一样返回对象。

function object(o){
  function F(){}
  F.prototype = o;
  return new F()
}

function createAnother(original){
  var clone = object(original);
  clone.sayHi = function(){
    console.log('Hi');
  }
  return clone
}
var person1 = {
  name:'Xiaoming',
  arr:[1,2,3]
}

var person2 = createAnother(person1);
person2.sayHi();

缺点：没用到原型，无法复用。

6. 寄生组合式继承

概念：通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。
基本思路：不必为了指定子类型的原型而调用父类型的构造函数，我们所需要的只是父类型原型的一个副本而已。本质上就是使用寄生式继承来继承父类型的原型，再将结果指定给子类型的原型。

function object(o){
  function F(){}
  F.prototype=o;
  return new F()
}
function inheritPrototype(subType,superType){
  var prototype = object(superType.prototype); //创建对象
  prototype.constructor = subType;             //增强对象
  subType.prototype = prototype;               //指定对象
}
function SuperType(name){
    this.name = name;
    this.arr = [1,2,3];
}
SuperType.prototype.sayName = function(){
  console.log(this.name)
}
function SubType(name,age){
  SuperType.call(this, name);  
  this.age=age;
}

inheritPrototype(SubType,SuperType);

SubType.prototype.sayAge = function(){
  console.log(this.age)
}

以上是es5实现继承的5种方式,es6中还可以通过class实现继承,实现方法如下:

class Parent {
    constructor(value){
        this.val=value
    }
    getValue(){
        console.log(this.val)
    }
}
class Child extends Parent {
    constructor(value){
        super(value)
    }
}
let child = new Child(1);
child.getValue();//1
console.log(child instance of Parent);//true

class 实现继承的核心在于使用extends表明继承自哪个父类,并且在子类构造函数中必须调用super,super(value)可以看成Parent.call(this,value).

ES5中的借助构造函数实现继承的方法与ES6实现继承的对比:
ES5的继承实质上是先创造实例对象this,再将父类的方法添加到this上面,(Parent.apply(this)).ES6的继承机制是先创造父类的实例对象this(所以必须先调用super方法),再用子类的构造函数修改this.

      

      

avatar
文章
阅读
粉丝