本文聚焦于 ES6 中 super 调用父类方法的完整解析：实现原理、用法要点与常见误区。通过系统梳理，可以清晰理解在派生类中如何正确地调用父类的构造函数、实例方法以及静态方法，以及在不同上下文下该如何使用 super，避免常见错误。
1.1 实现原理与调用机制
1.1.1 核心概念与定位
super 不是一个对象，它是在派生类的特定上下文中对父类进行引用的语言结构。它的作用是让当前派生类的实例能够访问父类的构造函数、原型方法以及静态方法。通过实现，super 指向父类的原型对象，从而实现对父类成员的“上层调用”能力。
在实例方法中，调用 super.method(...) 等价于在父类原型上找到同名方法，并将当前实例作为 this 绑定来执行。这一机制与原型链紧密相关：派生类的原型继承自父类的原型，super 的行为正是利用这条继承链来定位父类成员。
1.1.2 运行时绑定与原型链的关系
当在派生类的实例方法中使用 super.method，引擎会在父类的原型对象上查找该方法，并在调用时把当前对象作为 this 传入。这也解释了为什么 super 方法可以正确访问父类的实例属性和方法：this 的绑定来自调用方（当前实例），而非 super 本身。
类型层面的情况也很重要：在静态方法中使用 super，会引用父类的静态方法或静态属性；而在实例方法中使用 super，则引用父类原型上的实例方法或访问器（getter/setter）。这两种上下文可以独立存在，互不干扰。
class Parent {
constructor(name) { this.name = name; }
greet() { console.log('Hi from Parent', this.name); }
static info() { return 'Parent class'; }
}
class Child extends Parent {
constructor(name) { super(name); }
greet() { super.greet(); console.log('Hi from Child'); }
static info() { return super.info() + ' and Child'; }
}
2.1 构造函数中的 super 调用
2.1.1 构造器中的语义与顺序
在派生类的构造函数中，必须在访问 this 之前调用 super(...)，否则会造成引用错误。super(...) 会调用父类的构造函数，并返回将要绑定到 this 的对象。
this 的初始化顺序依赖于 super：只有在执行了 super(...) 之后，才能使用或赋值 this；否则 this 尚未绑定，直接访问会导致错误。
class Parent {
constructor(name) { this.name = name; }
}
class Child extends Parent {
constructor(name, age) {
super(name); // 调用父类构造函数，绑定 this
this.age = age; // 此时可以安全地操作 this
}
}
2.1.2 示例与要点
在派生类构造函数中，调用 super(...) 的参数应覆盖父类构造函数所需的参数，确保父类的初始化逻辑正确执行。若父类没有提供默认参数，派生类也应显式传递。
如果省略 super(...)，在派生类构造函数中直接使用 this จะ导致运行时错误，因为 this 还未绑定到实例。
3.1 实例方法中的 super 调用
3.1.1 调用父方法的规则
在派生类的实例方法中，super.method(...) 会调用父类同名方法，并将当前实例作为 this 传入。这样就能复用父类的行为，同时在需要时扩展或覆盖。
super 调用不会创建新的对象，它只是通过调用路径定位父级方法，并使用当前实例的上下文执行。
class Person {
say() { console.log('Person'); }
}
class Student extends Person {
say() {
super.say(); // 调用父类的 say
console.log('Student');
}
}
new Student().say();
/* 输出：
Person
Student
*/
3.1.2 this 与 super 的绑定关系
this 的绑定来自调用者，而非 super 本身。无论是在父类方法中还是在子类方法中执行，this 始终指向实际实例对象。
当你在派生类中覆盖父类方法时，使用 super 调用父类方法，是一种对行为的扩展，而不是替换掉父类的绑定关系。
class A {
getName() { return this.name; }
}
class B extends A {
getName() {
return super.getName() + ' [from B]';
}
}
const b = new B();
b.name = 'Alice';
console.log(b.getName()); // 输出: Alice [from B]
3.1.3 getter 与 setter 的使用
super 也可用于访问父类的 getter/setter。在派生类的 getter 中使用 super.value，相当于执行父类同名 getter 的返回值；在 setter 中使用 super.value = v，则会调用父类的 setter。
class User {
get value() { return this._value; }
set value(v) { this._value = v; }
}
class Admin extends User {
get value() { return super.value + ' (admin)'; }
set value(v) { super.value = v.replace('admin', ''); }
}
const u = new Admin();
u.value = '123';
console.log(u.value); // 123 (admin) 经过处理后输出
4.1 静态方法中的 super 调用
4.1 静态上下文中的 super
静态方法中的 super 指向父类的静态成员，而非实例成员。也就是说，在派生类的静态方法里，super.foo() 会去调用父类的静态方法 foo。
静态上下文与实例上下文不同步，请避免在静态方法里尝试访问 this 来调用实例方法；这通常会导致错误的绑定与行为不一致。
class Vehicle {
static info() { return 'Vehicle'; }
}
class Car extends Vehicle {
static info() {
return super.info() + ' -> Car';
}
}
console.log(Car.info()); // Vehicle -> Car
4.2 调用父静态方法的要点
派生类的静态方法若要扩展父类的静态行为，可以通过 super 调用父类的同名静态方法，然后在此基础上返回或扩展结果。
需要注意的是，super 不能用于调用父类的实例方法在静态上下文中，这两者属于不同的执行环境。
class Animal {
static describe() { return 'animal'; }
}
class Dog extends Animal {
static describe() {
return super.describe() + ' -> dog';
}
}
console.log(Dog.describe()); // animal -> dog
4.3 常见注意事项
在静态方法中使用 super 时，确保父类确实有对应的静态成员，否则调用会产生 TypeError。此外，静态方法中的 super 只能在派生类中使用，因为只有扩展关系才存在 super 的指向。
5. 常见误区与注意事项
5.1 常见错误点概览
错误点一：在非派生类中使用 super，或者在派生类构造函数中省略对 super 的调用。错误的上下文会导致语法错误或运行时错误。
错误点二：在实例方法中误用 super 来访问 this，或者期望 super 返回一个可直接操作的对象。实际上 super 只是一个对父类成员的入口，绑定仍然是 current this。
class A { say() { console.log('A'); } }
class B extends A {
say() {
// 错误做法：尝试把 super 当作对象
// let s = super;
// s.say();
super.say(); // 合法，传递当前 this
}
}
5.2 与箭头函数/类字段的关系
在方法内部使用箭头函数时，箭头函数不会持有自己的 this 或 super，它会捕获最近的作用域中的 this 与 super。因此，在包含箭头函数的情况下，super 的解析仍然遵循外部作用域的规则，但实际调用时需注意上下文。
如果使用较新的类字段语法来定义方法，super 仍然只在方法体内有效，而且初始化阶段仍应遵循在构造函数中的规则。
class A {
greet() { console.log('A'); }
}
class B extends A {
greet = () => {
// this 的箭头函数环境绑定，super 仍在外层方法内可用
super.greet();
}
}
5.3 浏览器兼容性与工具链
与 ES6 class、extends、super相关的语法在大多数现代浏览器中已得到良好支持，但在旧环境下需要使用转译工具（如 Babel）和运行时类补丁（如 core-js）。确保构建链正确配置插件/预设，以避免在复杂继承中出现 runtime 错误。
在涉及静态方法和原型链的高级用法时，也应关注目标环境的实现细节，避免在非标准环境里出现行为差异。
// Babel 运行时编译要点
// 使用 @babel/preset-env 以及 @babel/plugin-proposal-class-properties 等
// 确保对 super 调用的转换在目标环境中可被正确执行
6. 典型示例与代码演练
6.1 构造函数与方法的综合示例
下面的示例展示了一个三层继承结构：动物基类、哺乳动物、以及具体动物实现。在派生类中通过 super 调用父类构造与方法，体现了完整的调用链。通过组合构造与方法覆盖实现行为重用。
class Animal {
constructor(name) { this.name = name; }
speak() { console.log(this.name + ' makes a sound'); }
}
class Mammal extends Animal {
constructor(name, age) {
super(name);
this.age = age;
}
speak() { console.log(this.name + ' mammal sound'); }
}
class Dog extends Mammal {
constructor(name, age, breed) {
super(name, age);
this.breed = breed;
}
speak() {
super.speak(); // 调用 Mammal 的 speak
console.log('Dog breed: ' + this.breed);
}
}
const d = new Dog('Rover', 5, 'Labrador');
d.speak();
/* 输出：
Rover mammal sound
Dog breed: Labrador
*/
6.2 Getter/Setter 的实际应用
通过 super 的 getter/setter，可以实现父类行为的延展。例如在派生类中对父类值进行包装或校验。
class Counter {
constructor() { this._value = 0; }
get value() { return this._value; }
set value(v) { this._value = v; }
}
class CounterPlus extends Counter {
get value() { return super.value + 1; }
set value(v) { super.value = v - 1; }
}
const c = new CounterPlus();
c.value = 9;
console.log(c.value); // 10
6.3 动态方法名与 computed 调用
当父类提供多种方法，派生类可通过动态名称调用对应的父类方法，使用 super[methodName](...) 的形式。这在策略模式或多态实现中非常有用。
class Base {
greet() { console.log('hello'); }
bye() { console.log('goodbye'); }
}
class Derived extends Base {
call(name) {
if (typeof super[name] === 'function') {
super[name]();
}
}
}
const obj = new Derived();
obj.call('greet'); // 输出: hello
obj.call('bye'); // 输出: goodbye
通过对 ES6 中 super 调用父类方法的完整解析，可以看到实现原理、用法要点与常见误区均围绕“在派生类中如何正确定位父类成员并绑定 this”展开。以上示例覆盖了构造函数、实例方法、静态方法以及 getter/setter 的多种场景，帮助开发者在实际代码中做出正确的设计选择。
