揭秘 JavaScript 原型链：用超级英雄理解继承的奥秘

2022-11-11 22:41:13

JavaScript 原型链：揭开继承的秘密

在 JavaScript 的世界中，对象是构建应用程序的基本组成部分。每个对象都拥有自己的属性和方法，共同定义了其行为和状态。原型链是 JavaScript 中一个至关重要的概念，它允许对象共享属性和方法，从而实现代码的复用和可扩展性。

原型链是如何运作的？

想象一下，我们正在创建一个超级英雄游戏。每个超级英雄都有自己独特的技能和能力，比如超人可以飞行，蝙蝠侠擅长格斗。为了避免重复编写代码，我们可以使用原型链来实现超级英雄之间的继承。

我们首先创建一个超级英雄的基类，称为 Hero。这个基类定义了所有超级英雄共有的属性和方法，例如 name、age 和 fight() 方法。

class Hero {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  fight() {
    console.log(`${this.name} 使用了自己的能力战斗！`);
  }
}

接下来，我们可以创建具体英雄的子类，如 Superman 和 Batman。这些子类继承自 Hero 类，并且可以添加自己的特有属性和方法。

class Superman extends Hero {
  constructor(name, age) {
    super(name, age);
    this.ability = "飞行和激光眼";
  }

  fly() {
    console.log(`${this.name} 飞上了天空！`);
  }

  shootLaser() {
    console.log(`${this.name} 射出了激光眼！`);
  }
}

class Batman extends Hero {
  constructor(name, age) {
    super(name, age);
    this.ability = "格斗和小工具";
  }

  fightWithGadgets() {
    console.log(`${this.name} 使用小工具战斗！`);
  }
}

现在，我们可以创建 Superman 和 Batman 的实例，并调用他们的方法。

const superman = new Superman("超人", 30);
superman.fight();
superman.fly();
superman.shootLaser();

const batman = new Batman("蝙蝠侠", 40);
batman.fight();
batman.fightWithGadgets();

你会发现，Superman 和 Batman 都可以调用 fight() 方法，因为它是从 Hero 类继承而来的。同时，Superman 可以调用 fly() 和 shootLaser() 方法，而 Batman 可以调用 fightWithGadgets() 方法，这是他们各自特有的方法。

这就是 JavaScript 原型链的魅力所在。它允许对象共享属性和方法，从而实现代码的复用和可扩展性。就像超级英雄们可以继承上一代英雄的能力和经验，JavaScript 对象也可以继承上一级对象的属性和方法。

原型链的优点