JavaScript中的继承模式

2023-09-27 12:11:56

作为JavaScript开发者，掌握继承模式至关重要，它不仅是JavaScript深入学习的重点，更是面试中不可或缺的考点。然而，继承模式常常令人困惑。本文将以独到的视角，用简洁明了的代码和生动的图像，阐述JavaScript中的几种继承模式及其区别。

JavaScript的原型链继承

JavaScript通过原型链实现继承。在深入探讨继承模式之前，我们先简单了解一下构造函数和原型。

构造函数： 构造函数用于创建对象。它是一个特殊的函数，当用new调用时，会自动执行并返回一个新对象。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

原型： 每个函数都有一个名为“prototype”的属性，它是一个对象，包含了该函数构造的对象的共有属性和方法。

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

当创建新对象时，JavaScript会创建一个指向该构造函数原型的链接。这个链接称为原型链，它允许对象访问原型中的属性和方法。

JavaScript中的继承模式

JavaScript中主要的继承模式包括：

原型继承（使用Object.create()方法）： 这种模式创建一个新对象，该对象直接继承另一个对象的原型。

const child = Object.create(parent);

构造函数继承： 这种模式创建一个子构造函数，它继承父构造函数的属性和方法。

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

// 设置子构造函数的原型为父构造函数的原型
Child.prototype = Object.create(Parent.prototype);

组合继承： 这种模式结合了原型继承和构造函数继承，既继承了父对象的原型，也继承了父对象的属性和方法。

function Child(name, age) {
  // 使用Object.create()继承原型
  this.__proto__ = Parent.prototype;

  // 使用Parent.call()继承属性和方法
  Parent.call(this, name, age);
}

寄生继承： 这种模式创建一个新对象，该对象继承另一个对象的属性和方法，但没有继承它的原型。

const child = {};

// 复制父对象的可枚举属性
Object.assign(child, parent);

继承模式比较

模式	优点	缺点
原型继承	简单且高效	子对象无法访问父对象的构造函数
构造函数继承	维护原型链，支持多重继承	语法冗长，难以理解
组合继承	兼具原型继承和构造函数继承的优点	实现复杂，容易出错
寄生继承	代码简洁，子对象没有原型	无法访问父对象的原型方法