一文搞懂JavaScript中6种继承方式！

2023-10-09 20:54:17

前言

JavaScript是一种面向对象的编程语言，继承是面向对象编程中最重要的概念之一。继承允许我们创建新的类，这些新类可以从现有的类继承属性和方法。在JavaScript中，有6种继承方式，分别为：

原型链继承
构造函数继承
组合继承
原型式继承
寄生式继承
ES6的class

原型链继承

原型链继承是最简单的一种继承方式。在JavaScript中，每个对象都有一个原型对象。原型对象是一个特殊的对象，它包含了该对象的属性和方法。当我们访问一个对象的属性或方法时，JavaScript会首先在该对象中查找，如果没有找到，则会沿着原型链向上查找，直到找到为止。

原型链继承的优点是简单易用，缺点是继承关系不灵活，而且子类不能覆盖父类的方法。

构造函数继承

构造函数继承是另一种常见的继承方式。在JavaScript中，每个类都有一个构造函数。构造函数是一个特殊的函数，它在创建对象时被调用。构造函数可以接收参数，这些参数将被赋值给新对象的属性。

构造函数继承的优点是继承关系灵活，而且子类可以覆盖父类的方法。缺点是代码冗余，而且子类不能访问父类的私有属性和方法。

组合继承

组合继承是原型链继承和构造函数继承的组合。组合继承可以解决原型链继承和构造函数继承的缺点。

组合继承的优点是继承关系灵活，而且子类可以访问父类的私有属性和方法。缺点是代码冗余。

原型式继承

原型式继承是一种特殊的继承方式。在原型式继承中，新对象不是通过构造函数创建的，而是通过克隆原型对象创建的。

原型式继承的优点是简单易用，而且子类可以覆盖父类的方法。缺点是继承关系不灵活，而且子类不能访问父类的私有属性和方法。

寄生式继承

寄生式继承是另一种特殊的继承方式。在寄生式继承中，新对象不是通过构造函数创建的，也不是通过克隆原型对象创建的，而是通过创建一个新的对象，然后将父类的方法和属性添加到这个新对象中创建的。

寄生式继承的优点是简单易用，而且子类可以覆盖父类的方法。缺点是继承关系不灵活，而且子类不能访问父类的私有属性和方法。

ES6的class关键字

ES6中引入了class关键字，class关键字可以用来定义类。class关键字定义的类与通过构造函数定义的类非常相似，但是class关键字定义的类更加简洁。

ES6的class关键字的优点是语法简洁，而且子类可以覆盖父类的方法。缺点是ES6的class关键字只支持原型链继承。

结语

JavaScript中的继承方式有很多种，每种继承方式都有其各自的优缺点。在实际开发中，我们可以根据具体情况选择合适的继承方式。

实例代码

// 原型链继承
function Parent() {
  this.name = 'Parent';
}

function Child() {
  this.age = 18;
}

Child.prototype = new Parent();

const child = new Child();
console.log(child.name); // Parent
console.log(child.age); // 18

// 构造函数继承
function Parent() {
  this.name = 'Parent';
}

function Child() {
  Parent.call(this);
  this.age = 18;
}

const child = new Child();
console.log(child.name); // Parent
console.log(child.age); // 18

// 组合继承
function Parent() {
  this.name = 'Parent';
}

function Child() {
  Parent.call(this);
  this.age = 18;
}

Child.prototype = new Parent();

const child = new Child();
console.log(child.name); // Parent
console.log(child.age); // 18

// 原型式继承
const parent = {
  name: 'Parent'
};

const child = Object.create(parent);
child.age = 18;

console.log(child.name); // Parent
console.log(child.age); // 18

// 寄生式继承
const parent = {
  name: 'Parent',
  getName() {
    return this.name;
  }
};

const child = {};
Object.assign(child, parent);
child.age = 18;

console.log(child.name); // Parent
console.log(child.age); // 18
console.log(child.getName()); // Parent

// ES6的class关键字
class Parent {
  constructor() {
    this.name = 'Parent';
  }

  getName() {
    return this.name;
  }
}

class Child extends Parent {
  constructor() {
    super();
    this.age = 18;
  }
}

const child = new Child();
console.log(child.name); // Parent
console.log(child.age); // 18
console.log(child.getName()); // Parent