ES6 javascript中Class类继承用法实例详解

ES6（ECMAScript 2015）的JavaScript提供了更简洁易懂的类和继承的语法，取代了ES5中复杂的原型链操作。ES6引入了Class关键字，允许开发者使用传统的面向对象编程方式来创建类和实现继承。下面详细介绍ES6中Class类继承的用法、相关属性、方法以及使用技巧。 ### 基本用法 ES6中定义类的基本语法使用`class`关键字，例如： ```javascript class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return `[${this.x}, ${this.y}]`; } } ``` 要实现继承，可以使用`extends`关键字。例如创建一个名为`ColorPoint`的类，继承自`Point`类： ```javascript class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 调用父类的constructor(x, y) this.color = color; } toString() { return this.color + ' ' + super.toString(); // 调用父类的toString() } } ``` 在这个例子中，`ColorPoint`类通过`extends`关键字继承了`Point`类。`super()`函数用于调用父类的构造函数，必须在子类的构造函数中首先被调用，否则会报错。`super`也可用于调用父类的方法。如果子类没有显式定义构造函数，JavaScript会自动创建一个默认的构造函数，并在其中调用`super()`。 ### 类的prototype属性和__proto__属性 类在JavaScript中是基于原型的，类实例的继承链由`prototype`和`__proto__`属性共同构成。 - `__proto__`：指向类的原型对象（即父类），表示构造函数的继承链。 - `prototype`：通过`prototype`属性可以向类添加方法，这些方法会被所有实例继承。 - `prototype.__proto__`：指向父类的`prototype`，表示方法的继承链。 例如： ```javascript class A {} class B extends A {} ``` 在上述代码中，`B.__proto__`会指向`A`，表示`B`是`A`的子类；`B.prototype.__proto__`也会指向`A.prototype`，表示`B`的方法继承自`A`的方法。 ### 使用技巧 1. **覆盖父类的方法**：子类可以覆盖父类的方法来实现特定的功能。 2. **调用父类的方法**：使用`super`关键字调用父类的方法。 3. **在子类中使用`super`前不能使用`this`**：只有在`super()`调用之后，才能在构造函数中使用`this`，因为`this`的绑定是在父类的构造函数中处理的。 4. **子类构造函数必须调用`super`**：子类构造函数必须调用`super`，否则会报错。 5. **不要忘记`super`的调用**：特别是在子类中重写构造函数时，一定要确保先调用`super()`。 ### 实例详解 以一个具体的实例来详解类的继承： ```javascript class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return `[${this.x}, ${this.y}]`; } } class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 必须先调用super()，再使用this this.color = color; } toString() { return this.color + ' ' + super.toString(); // super调用父类的toString() } } let cp = new ColorPoint(25, 8, 'green'); console.log(cp.toString()); // 输出 'green [25, 8]' console.log(cp instanceof ColorPoint); // true console.log(cp instanceof Point); // true ``` 在这个例子中，`ColorPoint`继承了`Point`，并添加了一个新的属性`color`。在`ColorPoint`的`toString`方法中，通过`super.toString()`调用父类的`toString`方法，然后添加颜色信息。创建`ColorPoint`实例并调用`toString`方法，可以看到它输出了包含颜色信息的字符串，同时`cp`既属于`ColorPoint`类的实例，也属于`Point`类的实例。 ES6的类继承是面向对象编程的一个强大特性，它简化了继承的实现，使得代码结构更清晰、更易于理解和维护。