JavaScript 中 ES6 类 (Class) 继承的原理是什么？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

在 JavaScript 中，ES6 类继承的原理是基于原型链的。ES6 的 class 语法糖实际上是对原型继承的封装，使得继承的写法更加直观和易于理解。通过 extends 关键字，子类可以继承父类的属性和方法，并且可以通过 super 关键字调用父类的构造函数和方法。

// www.javascriptcn.com code example
class Parent {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, ${this.name}`);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 调用父类的构造函数
    this.age = age;
  }

  sayAge() {
    console.log(`I am ${this.age} years old`);
  }
}

const child = new Child('Alice', 10);
child.sayHello(); // 输出: Hello, Alice
child.sayAge();   // 输出: I am 10 years old

本题详细解读

1. 原型链继承

在 JavaScript 中，每个对象都有一个内部属性 [[Prototype]]，指向它的原型对象。当访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或方法为止。

ES6 的 class 语法糖实际上是通过原型链来实现继承的。当使用 extends 关键字时，子类的原型对象会指向父类的实例，从而形成原型链。

2. `super` 关键字

super 关键字在子类中有两个主要用途：

调用父类的构造函数：在子类的构造函数中，super() 必须在使用 this 之前调用，以确保父类的构造函数先执行，初始化父类的属性。
调用父类的方法：在子类的方法中，可以通过 super.methodName() 来调用父类的方法。

3. 静态方法的继承

ES6 类还支持静态方法的继承。静态方法是定义在类本身上的方法，而不是类的实例上。子类可以通过 extends 继承父类的静态方法，并且可以在子类中通过 super 调用父类的静态方法。

// www.javascriptcn.com code example
class Parent {
  static staticMethod() {
    console.log('Parent static method');
  }
}

class Child extends Parent {
  static staticMethod() {
    super.staticMethod(); // 调用父类的静态方法
    console.log('Child static method');
  }
}

Child.staticMethod(); 
// 输出:
// Parent static method
// Child static method

4. `Object.getPrototypeOf` 和 `instanceof`

通过 Object.getPrototypeOf 可以查看对象的原型链，而 instanceof 运算符可以用来检查一个对象是否是某个类的实例。

console.log(Object.getPrototypeOf(Child) === Parent); // 输出: true
console.log(child instanceof Parent); // 输出: true
console.log(child instanceof Child);  // 输出: true

5. 总结

ES6 的类继承机制是基于原型链的，通过 extends 和 super 关键字，子类可以继承父类的属性和方法，并且可以在子类中扩展或重写这些属性和方法。这种继承方式使得代码更加清晰和易于维护。

JavaScript 中 ES6 类 (Class) 继承的原理是什么？