巧用 JS 妙计，实现前端继承之玄妙

2023-12-17 09:34:03

在前端开发中，继承是对象之间共享行为和属性的重要机制。JavaScript 中虽然没有像传统面向对象语言那样的类继承，但聪明的开发者们创造性地提出了多种实现继承的方法，本文将逐一探讨这些技巧，带领你领略前端继承的玄妙世界。

构造函数的应用：简单直接

构造函数是一种最基本、最直接的继承方式。通过在子构造函数中调用父构造函数，可以实现属性和方法的继承。例如：

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

Parent.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
};

function Child(name, age) {
  Parent.call(this, name); // 调用父构造函数
  this.age = age;
}

Child.prototype = Object.create(Parent.prototype); // 继承父原型

const child = new Child("John", 25);
child.greet(); // Hello, my name is John

原型继承：巧借东风

原型继承利用了 JavaScript 中对象的原型机制。通过修改子对象的原型对象，可以实现属性和方法的继承。例如：

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

Parent.prototype.greet = function() {
  console.log("Hello, I'm " + this.name);
};

function Child() {
  this.name = "Child";
}

Child.prototype = Object.create(Parent.prototype); // 继承父原型

const child = new Child();
child.greet(); // Hello, I'm Child

借用继承：借花献佛

借用继承通过创建一个中间对象，将父对象的方法借用给子对象，从而实现继承。例如：

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

Parent.prototype.greet = function() {
  console.log("Hello, I'm " + this.name);
};

function Child() {
  this.name = "Child";
}

// 借用父对象的方法
Child.prototype.greet = Parent.prototype.greet;

const child = new Child();
child.greet(); // Hello, I'm Child

组合继承：集大成者

组合继承结合了构造函数和原型继承，兼具二者的优点。通过在子构造函数中调用父构造函数，并修改子原型的原型对象，可以实现属性、方法和原型链的继承。例如：

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

Parent.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
};

function Child(name, age) {
  Parent.call(this, name); // 调用父构造函数
  this.age = age;
}

// 修改子原型的原型对象
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child; // 修复 constructor 指向

const child = new Child("John", 25);
child.greet(); // Hello, my name is John

拷贝继承：克隆大师

拷贝继承通过使用浅拷贝或深拷贝的方式，将父对象克隆给子对象，从而实现继承。例如：

// 浅拷贝
function Parent(name) {
  this.name = name;
}

Parent.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
};

function Child() {
  this.name = "Child";
  Object.assign(this, new Parent("Parent")); // 浅拷贝父对象
}

// 深拷贝
function deepClone(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }

  if (obj instanceof Array) {
    return obj.map(item => deepClone(item));
  }

  const newObj = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepClone(obj[key]);
    }
  }

  return newObj;
}

function Child() {
  this.name = "Child";
  this.parent = deepClone(new Parent("Parent")); // 深拷贝父对象
}

const child = new Child();
child.greet(); // Hello, my name is Parent

寄生继承：投机取巧

寄生继承通过创建一个寄生构造函数，将父对象作为参数传入，然后使用 apply() 方法将父构造函数的上下文指向子构造函数，从而实现继承。例如：

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

Parent.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
};

function Child(name, age) {
  const parent = new Parent(name); // 创建父对象
  apply(parent, arguments); // 将父构造函数的上下文指向子构造函数
  this.age = age;
}

const child = new Child("John", 25);
child.greet(); // Hello, my name is John

寄生组合继承：百尺竿头更进一步

寄生组合继承结合了寄生继承和组合继承的优点，避免了两者的缺点。通过在寄生构造函数中修改子原型的原型对象，可以实现属性、方法和原型链的继承。例如：

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

Parent.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
};

function Child(name, age) {
  const parent = new Parent(name); // 创建父对象
  apply(parent, arguments); // 将父构造函数的上下文指向子构造函数
  this.age = age;

  // 修改子原型的原型对象
  Child.prototype = Object.create(Parent.prototype);
  Child.prototype.constructor = Child;
}

const child = new Child("John", 25);
child.greet(); // Hello, my name is John

ES6 class 语法糖的魅力

ES6 中引入的 class 为 JavaScript 提供了类和继承的语法糖。通过使用 class 关键字，可以方便地定义类，并使用 extends 关键字实现继承。例如：

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;
  }
}

const child = new Child("John", 25);
child.greet(); // Hello, my name is John