JavaScript继承的详解|极客笔记

JavaScript继承的详解

1. 介绍

继承是面向对象编程中的一个重要概念，它允许我们创建一个新的类（子类），继承父类的属性和方法，并且可以对其进行扩展或修改。JavaScript是一种面向对象的动态编程语言，通过原型继承（prototype inheritance）实现对象之间的继承关系。本文将详细介绍JavaScript中继承的概念、原型链的工作原理以及几种常用的继承方式。

2. 原型链

在JavaScript中，每一个对象都有一个指向它原型的链接，这个链接被称为原型链。当我们访问一个对象的属性或方法时，如果该对象本身不存在这个属性或方法，JavaScript引擎会沿着原型链继续查找，直到找到该属性或方法，或者到达原型链的末尾（null）。

在这个示例中，Animal是一个父类，Cat是它的子类，Kitty是Cat的实例。当我们访问Kitty的属性时，JavaScript引擎会先在Kitty对象中查找，如果找不到，就会沿着原型链依次在Cat和Animal中查找，直到找到此属性为止。

3. 继承的几种方式

3.1 构造函数继承

构造函数继承是指子类通过调用父类的构造函数来继承父类的属性。这种方式可以通过使用call或apply方法，在子类的构造函数中调用父类的构造函数，并将子类的实例(this)传递给父类，以继承父类的属性。

示例代码如下所示：

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

Animal.prototype.run = function() {
  console.log(this.name + ' is running.');
}

function Cat(name) {
  Animal.call(this, name); // 调用父类的构造函数
}

var kitty = new Cat('Kitty');
kitty.run(); // 输出: Kitty is running.

构造函数继承的特点：

子类只能继承父类的实例属性，不能继承原型属性。
子类创建的每个实例都会拥有父类的副本。

3.2 原型链继承

原型链继承是指子类的原型对象指向父类的实例，从而继承父类的属性和方法。这种方式可以通过将父类的实例赋值给子类的原型对象实现。

示例代码如下所示：

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

Animal.prototype.run = function() {
  console.log(this.name + ' is running.');
}

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

Cat.prototype = new Animal(); // 子类的原型对象指向父类的实例

var kitty = new Cat('Kitty');
kitty.run(); // 输出: Kitty is running.

原型链继承的特点：

子类可以继承父类的属性和方法，包括实例属性、实例方法和原型属性、原型方法。
子类创建的每个实例共享一个父类实例。

3.3 组合继承

组合继承是指同时使用构造函数继承和原型链继承的方式来进行继承。这种方式先使用构造函数继承父类的属性，然后将子类的原型对象指向父类的实例，从而继承父类的方法。

示例代码如下所示：

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

Animal.prototype.run = function() {
  console.log(this.name + ' is running.');
}

function Cat(name) {
  Animal.call(this, name); // 调用父类的构造函数继承属性
}

Cat.prototype = new Animal(); // 子类的原型对象指向父类的实例，继承方法
Cat.prototype.constructor = Cat; // 修复子类的构造函数指向

var kitty = new Cat('Kitty');
kitty.run(); // 输出: Kitty is running.

组合继承的特点：

子类可以继承父类的属性和方法，包括实例属性、实例方法和原型属性、原型方法。
子类创建的每个实例都拥有父类的副本。

3.4 原型式继承

原型式继承是指通过创建一个空对象作为中介，利用现有对象作为该空对象的原型，从而实现继承。这种方式可以使用Object.create方法实现。

示例代码如下所示：

var animal = {
  name: 'Animal',
  run: function() {
    console.log(this.name + ' is running.');
  }
};

var cat = Object.create(animal); // 通过现有对象作为原型创建新对象

cat.name = 'Cat';

cat.run(); // 输出: Cat is running.

原型式继承的特点：

子对象会继承父对象的属性和方法。
子对象和父对象之间是浅层继承关系。

3.5 寄生式继承

寄生式继承是指创建一个继承了父对象属性和方法的新对象，并对该对象进行扩展或修改，最后返回该新对象。这种方式可以通过封装一个继承和扩展的函数实现。

示例代码如下所示：

function createCat(name) {
  var cat = Object.create(animal); // 通过现有对象作为原型创建新对象
  cat.name = name;
  return cat;
}

var kitty = createCat('Kitty');

kitty.run(); // 输出: Kitty is running.

寄生式继承的特点：