ES6 JavaScript 中的 Class 类继承详解

"ES6中的JavaScript Class类继承详解，包括基本用法、构造函数与super关键字的使用，以及对原型链的理解" 在ES6中，`Class`语法引入了一种新的面向对象编程的表达方式，使得类的继承更加简洁和直观。`Class`类继承通过`extends`关键字实现，它允许一个类（子类）继承另一个类（父类）的特性，包括属性和方法。 1. **基本用法** 子类通过`extends`关键字声明继承自父类，如： ```javascript class Parent {} class Child extends Parent {} ``` 这样，Child类就继承了Parent类的所有属性和方法。 2. **构造函数与`super`关键字** 子类的构造函数需要调用`super`关键字来调用父类的构造函数，初始化父类的属性。例如： ```javascript class Parent { constructor(x, y) { this.x = x; this.y = y; } } class Child extends Parent { constructor(x, y, color) { super(x, y); // 调用父类的构造函数 this.color = color; } } ``` 如果子类的构造函数没有调用`super`，那么在创建子类实例时会报错，因为子类没有自己的`this`对象，它需要通过`super`获取父类的`this`并进行扩展。 3. **`super`关键字的使用** `super`不仅可以用于构造函数，还可以在普通方法中调用父类的方法。比如： ```javascript class Parent { toString() { return 'x: ' + this.x + ', y: ' + this.y; } } class Child extends Parent { toString() { return 'color: ' + this.color + ', ' + super.toString(); // 调用父类的toString方法 } } ``` 在`toString`方法中，`super.toString()`用于调用父类的`toString`方法。 4. **原型链的理解** ES5的继承是通过修改原型链实现的，即`__proto__`指向父类实例。而ES6的继承机制完全不同，它采用的是“原型链继承”和“实例继承”的混合模式。在ES6中，子类的原型（`__proto__`）会被设置为父类的实例，而子类实例的`[[Prototype]]`会被设置为父类的构造函数。因此，子类实例可以直接访问父类的所有实例方法和静态方法。 5. **静态方法的继承** 类的静态方法也可以被继承。父类的静态方法通过`class`关键字定义，会被子类继承： ```javascript class Parent { static staticMethod() { return 'Parent'; } } class Child extends Parent { } console.log(Child.staticMethod()); // 'Parent' ``` 6. **访问控制与重写** ES6的`Class`支持`public`（默认）、`private`和`protected`访问修饰符，但JavaScript引擎目前只支持`public`。子类可以覆盖父类的公共方法，但对于私有和受保护的方法，子类无法直接访问或覆盖。 7. **`super`与原型链的关系** `super`关键字不仅用于调用父类的构造函数和方法，还用于访问父类的属性。当在子类中通过`super`访问父类的属性时，实际上是通过子类的原型链找到的。 8. **`instanceof`运算符** 使用`instanceof`运算符可以检查一个对象是否是某个类的实例，即使这个类是通过继承链来的。 ES6的`Class`类继承提供了更接近传统面向对象编程的概念，简化了JavaScript的继承机制，同时也保留了原型链的特点，使得代码更易读、易维护。通过`extends`和`super`关键字，开发者可以灵活地构建复杂的类继承结构。