JavaScript 代码的优化方案：六种最流行的JavaScript 继承方法及应用场景

2023-04-22 19:09:45

JavaScript 继承的六种方法，优化和维护 JavaScript 代码

JavaScript 继承的基础

JavaScript 通过原型链实现继承，每个对象都有一个指向其父对象的原型属性。当对象访问其自身不存在的属性或方法时，JavaScript 会沿着原型链向上查找，直到找到该属性或方法。

六种 JavaScript 继承方法

1. 类继承

类继承是最直接的继承方法，子类继承父类的属性和方法。

class Parent {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
  getAge() {
    console.log(`I am ${this.age} years old.`);
  }
}

2. 原型继承

原型继承允许子对象继承父对象的原型。

const parent = {
  name: "John",
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

const child = Object.create(parent);
child.name = "Jane";

3. 组合继承

组合继承结合了类继承和原型继承，子类既继承父类的属性和方法，又继承父对象的原型。

class Parent {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const parent = new Parent("John");

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
  getAge() {
    console.log(`I am ${this.age} years old.`);
  }
}

4. 寄生继承

寄生继承允许子对象继承父对象的所有属性和方法，但不继承父对象的原型。

const parent = {
  name: "John",
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

const child = {};
child.__proto__ = parent;
child.name = "Jane";

5. 对象继承

对象继承允许子对象继承父对象的所有属性和方法，但不继承父对象的原型。

const parent = {
  name: "John",
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

const child = Object.assign({}, parent);
child.name = "Jane";

6. 混入继承

混入继承允许将一个对象的属性和方法添加到另一个对象中。

const mixin = {
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

const child = {};
Object.assign(child, mixin);
child.name = "Jane";