JS常见的几种继承方式

知行行知
238 阅读6分钟

本文列出JS中几种常见的继承方式，包含ES6中的extend继承。

1. 原型链继承

// 创建一个构造函数
function Father() {
  this.name = "smd";
  this.arr = [1, 2, 3];
}

Father.prototype.fnA = function() {
  console.log('a');
}

// 另一个构造函数
function Child() {
  this.selfArr = ['a', 'b', 'c'];
}

// 创建Father函数的实例，并把地址赋值给被继承者Child.prototype
Child.prototype = new Father();

var f1 = new Father();
var f2 = new Father();
var c1 = new Child();
var c2 = new Child();
f1.arr.push(4);
f2.arr.push(5);
c1.arr.push(4);
c2.arr.push(5);
c1.selfArr.push('d');

console.log(f1.arr);  // [1, 2, 3, 4]
console.log(f2.arr);  // [1, 2, 3, 5]
console.log(c1.arr);  // [1, 2, 3, 4, 5]
console.log(c2.arr);  // [1, 2, 3, 4, 5]
console.log(c1.selfArr); // ['a', 'b', 'c', 'd']
console.log(c2.selfArr); // ['a', 'b', 'c']

本图引用自 JavaScript常用八种继承方案，SuperType对应Father，SubType对应Child。

image.png

缺点：

  • 子类的constructor指向父类，需要手动改写construtor。

  • new出来的多个实例之间引用类型属性的地址是不同的，但是原型链继承会使子类实例继承自父类实例的引用类型互相篡改。

2. 借助构造函数继承

function Father(name, age) {
  this.name = name;
  this.age = age;
  this.arr = [1, 2, 3];
}

function Child() {
  // 继承Father
  Father.call(this);
}

var f1 = new Father();
var c1 = new Child();
var c2 = new Child();
c1.arr.push(4);
c2.arr.push(5);
console.log(f1.arr); // [1, 2, 3]
console.log(c1.arr); // [1, 2, 3, 4]
console.log(c2.arr); // [1, 2, 3, 5]

缺点：

  • 子类只能继承父类的实例属性和方法，不能继承原型属性/方法

  • 无法实现复用，每个子类都有父类实例函数的副本，影响性能

3. 组合式继承

组合继承就是将原型链继承和借用构造函数继承组合到一起实现的继承方式。用原型链实现对原型属性和方法的继承，用借用构造函数技术来实现实例属性的继承。

function Father(name, age) {
  this.name = name;
  this.age = age;
  this.arr = [1, 2, 3];
}

Father.prototype.sayName = function () {
  console.log(this.name);
}

function Child(name, age, job) {
  // Child继承Father实例的属性，第二次执行Father函数
  Father.call(this, name, age);
  this.job = job;
}

// Child继承Father原型上的属性方法，第一次执行Father函数
Child.prototype = new Father();

// 重写Child的constructor
Child.prototype.constructor = Child;

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

var c1 = new Child('wwx', 30, 'FE');
c1.arr.push(4);
console.log(c1.arr); // [1, 2, 3, 4]
c1.sayName(); // wwx
c1.sayAge(); // 30

var c2 = new Child('www', 20, 'FM');
c2.arr.push(5);
console.log(c2.arr); // [1, 2, 3, 5]
c2.sayName(); // www
c2.sayAge(); // 20

1.png

缺点：

  • 第一次调用Father函数，给Child.prototype写入两个属性name和age。

  • 第二次调用Father函数，给实例c1写入name和age属性。

实例对象c1上的两个属性就屏蔽了其原型对象Father.prototype的两个同名属性。所以，组合模式的缺点就是在使用子类创建实例对象时，其原型中会存在两份相同的属性/方法(如上图中name和age)。

4. 原型式继承

利用一个空对象作为中介，将某个对象直接赋值给空对象构造函数的原型。

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

createObj()对传入其中的对象执行了一次浅复制，将构造函数F的原型直接指向传入的对象。

var person = {
  name: 'wwx',
  age: 30,
  arr: [1, 2, 3]
}

var onePerson = createObj(person);
onePerson.name = 'Jack';
onePerson.arr.push(4);

var anotherPerson = createObj(person);
anotherPerson.name = 'Rose';
anotherPerson.arr.push(5);
console.log(onePerson.name);  // Jack
console.log(onePerson.arr);  // [1, 2, 3, 4, 5]
console.log(anotherPerson.name);  // Rose
console.log(anotherPerson.arr); // [1, 2, 3, 4, 5]

缺点：

  • 继承自person的多个实例的引用类型属性指向相同，存在篡改的可能。

  • 无法传递参数

另外，ES5中存在Object.create()的方法，能够代替上面的createObj方法。

5. 寄生式继承

核心：在原型式继承的基础上，增强对象，返回构造函数。

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

function createAnother(original){
  // 通过调用 object() 函数创建一个新对象
  var clone = createObj(original);
  // 以某种方式来增强对象
  clone.sayHi = function(){
    alert("hi");
  };
  return clone; // 返回这个对象
}

函数的主要作用是为构造函数新增属性和方法，以增强函数。

function createObj2(o) {
  var obj = createObj(o);
  obj.sayHi = function() {
    alert('hi');
  }
  return obj;
}


var person = {
  name: "wwx",
  arr: [1, 2, 3]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); // "hi"

缺点（同原型式继承）：

  • 继承自person的多个实例的引用类型属性指向相同，存在篡改的可能。

  • 无法传递参数

6. 寄生组合式继承

结合借用构造函数传递参数和寄生模式实现继承：

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

function inheritProtorype(Child, Father) {
  // 创建一个继承自父类原型的对象
  var prototype = createObj(Father.prototype);
  // 增强对象，重写constructor指向
  prototype.constructor = Child;
  // 将新创建的对象赋值给子类的原型
  Child.prototype = prototype;
}

function Father(name) {
  this.name = name;
  this.arr = [1, 2, 3, 4];
}

Father.prototype.sayName = function() {
  console.log('父类原型' + this.name);
}

// 借用构造函数传递增强子类实例属性（支持传参和避免篡改）
function Child(name, age) {
  Father.call(this, name);
  this.age = age;
}

inheritProtorype(Child, Father);

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

var child1 = new Child('ww', 10);
var child2 = new Child('xx', 20);

child1.arr.push(5);
console.log(child1.name); // 'ww'
console.log(child2.name); // 'xx' 
console.log(child1.arr); // [1, 2, 3, 4, 5]
console.log(child2.arr); // [1, 2, 3, 4]

这个例子的高效率体现在它只调用了一次 Father 构造函数，并且因此避免了在 Child.prototype 上创建不必要的、多余的属性。与此同时，原型链还能保持不变；因此，还能够正常使用instanceof 和 isPrototypeOf()。

优点：

  • 可以多重继承 解决两次调用 解决实例共享引用类型的问题 原型链保持不变

7. 混入方式继承多个对象

function MyClass() {
   SuperClass.call(this);
   OtherSuperClass.call(this);
}

// 继承一个类
MyClass.prototype = Object.create(SuperClass.prototype);
// 混合其它
Object.assign(MyClass.prototype, OtherSuperClass.prototype);
// 重新指定constructor
MyClass.prototype.constructor = MyClass;

MyClass.prototype.myMethod = function() {
     // do something
};

Object.assign会把 OtherSuperClass 原型上的函数拷贝到 MyClass原型上，使 MyClass 的所有实例都可用 OtherSuperClass 的方法。

8. ES6类继承extends

extends关键字主要用于类声明或者类表达式中，以创建一个类，该类是另一个类的子类。其中constructor表示构造函数，一个类中只能有一个构造函数，有多个会报出SyntaxError错误，如果没有显式指定构造方法，则会添加默认的 constructor 方法，使用例子如下。

class Rectangle {
    // constructor
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }
    
    // Getter
    get area() {
        return this.calcArea()
    }
    
    // Method
    calcArea() {
        return this.height * this.width;
    }
}

const rectangle = new Rectangle(10, 20);
console.log(rectangle.area);  // 200


// 继承
class Square extends Rectangle {

  constructor(width, height) {
    super(width, height);
    
    // 如果子类中存在构造函数使用“this”之前首先调用super方法
    this.name = 'Square';
  }

  get area() {
    return this.height * this.width;
  }
}

const square = new Square(10, 10);
console.log(square.area);  // 100

extends 继承的核心代码如下，其实现和上述的寄生组合式继承方式一样。

function _inherits(subType, superType) {
    // 创建对象，创建父类原型的一个副本
    // 增强对象，弥补因重写原型而失去的默认的constructor 属性
    // 指定对象，将新创建的对象赋值给子类的原型
    subType.prototype = Object.create(superType && superType.prototype, {
        constructor: {
            value: subType,
            enumerable: false,
            writable: true,
            configurable: true
        }
    });
    
    if (superType) {
        Object.setPrototypeOf 
            ? Object.setPrototypeOf(subType, superType) 
            : subType.__proto__ = superType;
    }
}

函数声明和class声明的区别

  • class不会变量提升，function可以提升

  • class必须new调用，不能直接执行

  • class中原型方法不能被枚举

ES5继承和ES6继承的区别

  • ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上（Parent.call(this))。

  • ES6的继承有所不同，实质上是先创建父类的实例对象this，然后再用子类的构造函数修改this。因为子类没有自己的this对象，所以必须先调用父类的super()方法，否则新建实例报错。

参考文章

本文部分内容和图片转载自以下文章：

JavaScript常用八种继承方案

avatar
文章
阅读
粉丝