JavaScript 父类方法调用详解：super关键字与原型链机制370

在 JavaScript 中，面向对象编程的概念虽然与传统面向对象语言（如 Java、C++）有所不同，但它依然支持继承和多态。理解如何在 JavaScript 中调用父类方法是掌握其面向对象编程的关键。本文将深入探讨 JavaScript 中调用父类方法的各种方法，特别是 `super` 关键字的使用以及底层原型链机制的运作原理。

JavaScript 的继承机制并非基于类的直接继承，而是基于原型链（prototype chain）。每个对象都有一个原型对象，而原型对象又可以有自己的原型对象，以此类推，形成一条链。当我们访问一个对象的属性或方法时，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端（`null`）。

在 ES6 之前，调用父类方法主要依靠原型链查找。我们需要手动在子类方法中调用父类原型上的方法。这种方法虽然可行，但代码可读性和维护性较差，尤其是在继承链较长的情况下。

例如，假设我们有两个构造函数：`Parent` 和 `Child`：```javascript
function Parent() {
= "Parent";
}
= function() {
("Hello, I'm a " + );
};
function Child() {
(this); // 调用父类构造函数
= "Child";
}
= (); // 设置原型链
= Child; // 修正构造函数
= function() {
(this); // 调用父类 greet 方法
("And I'm a Child!");
};
let child = new Child();
(); // 输出: Hello, I'm a Child, And I'm a Child!
```

这段代码中，`Child` 通过 `(this)` 调用父类构造函数，并通过 `()` 设置原型链。在 `` 方法中，我们使用 `(this)` 来调用父类 `greet` 方法。这种方式比较繁琐，且容易出错。

ES6 引入了 `class` 语法和 `super` 关键字，极大地简化了父类方法的调用。使用 `class` 语法，我们可以更清晰地表达继承关系，并使用 `super` 关键字直接调用父类方法和构造函数。```javascript
class Parent {
constructor() {
= "Parent";
}
greet() {
("Hello, I'm a " + );
}
}
class Child extends Parent {
constructor() {
super(); // 调用父类构造函数
= "Child";
}
greet() {
(); // 调用父类 greet 方法
("And I'm a Child!");
}
}
let child = new Child();
(); // 输出: Hello, I'm a Child, And I'm a Child!
```

这段代码使用了 `class` 语法，`super()` 调用了父类构造函数，`()` 直接调用了父类 `greet` 方法。代码更加简洁易懂，可读性大大提高。需要注意的是，`super()` 必须在子类构造函数中首先被调用。

`super` 关键字不仅可以调用父类方法，还可以访问父类属性。例如：```javascript
class Parent {
constructor(name) {
= name;
}
}
class Child extends Parent {
constructor(name, age) {
super(name); // 调用父类构造函数，并传入参数
= age;
}
introduce() {
(`My name is ${}, and I'm ${} years old.`);
}
}
let child = new Child("Alice", 30);
(); // 输出: My name is Alice, and I'm 30 years old.
```