揭秘JS继承六种方式，助你成为JavaScript高手

前端

2023-01-23 12:49:25

JavaScript 继承：全面指南

JavaScript 中的继承是创建可维护、可扩展代码的关键。理解其机制至关重要，这篇文章将深入探讨 JavaScript 的继承概念，包括不同的类型、优缺点以及如何做出正确的选择。

什么是 JavaScript 继承？

JavaScript 继承是一种机制，允许子类从父类那里获取属性和方法。这使得子类可以复用父类的功能，同时扩展并增强它们。

JavaScript 继承类型

1. 原型继承

最简单、最常用的方法。每个对象都有一个原型对象，作为它的父级。子类通过原型链访问父类的属性和方法。

const Parent = {
  name: 'Parent',
  sayHello() {
    console.log('Hello from Parent');
  }
};

const Child = Object.create(Parent);
Child.sayHello(); // "Hello from Parent"

2. 经典继承

使用构造函数实现。子类的构造函数继承父类的构造函数，并在创建子类对象时调用它。

function Parent(name) {
  this.name = name;
  this.sayHello = function() {
    console.log('Hello from Parent');
  };
}

function Child(name) {
  Parent.call(this, name);
}

const child = new Child('Child');
child.sayHello(); // "Hello from Parent"

3. 组合继承

结合原型继承和经典继承。子类的构造函数调用父类的构造函数，将父类的原型对象赋给子类的原型对象。

function Parent(name) {
  this.name = name;
}

Parent.prototype.sayHello = function() {
  console.log('Hello from Parent');
};

function Child(name) {
  Parent.call(this, name);
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

const child = new Child('Child');
child.sayHello(); // "Hello from Parent"

4. 寄生继承

创建一个新对象，将父类的原型对象赋给子类的原型对象。

const Parent = {
  name: 'Parent',
  sayHello() {
    console.log('Hello from Parent');
  }
};

const Child = (function() {
  const newObj = Object.create(Parent);
  newObj.name = 'Child';
  return newObj;
})();

Child.sayHello(); // "Hello from Parent"

5. 寄生组合继承

结合寄生继承和组合继承。将父类的构造函数赋给子类的原型对象。

const Parent = {
  name: 'Parent',
  sayHello() {
    console.log('Hello from Parent');
  }
};

const Child = (function() {
  const newObj = Object.create(Parent);
  newObj.constructor = Child;
  Child.prototype = newObj;
  return Child;
})();

const child = new Child();
child.sayHello(); // "Hello from Parent"

6. 类继承（ES6）

使用类来定义类。使用super关键字访问父类的属性和方法。

class Parent {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log('Hello from Parent');
  }
}

class Child extends Parent {
  constructor(name) {
    super(name);
  }
}

const child = new Child('Child');
child.sayHello(); // "Hello from Parent"