JavaScript ES6 Class详解：语法与继承

"class基本语法和class的继承" ES6中的`class`关键字是JavaScript的一种新的语法糖，它提供了更简洁、易读的方式来定义构造函数和类。虽然它看起来像是一个全新的概念，但其实`class`本质是通过ES5的原型链继承来实现的。这意味着，类的所有方法实际上都定义在类的`prototype`属性上。 ### 1. 类的基本语法 `class`关键字用于创建一个类。例如，我们可以创建一个名为`Point`的类： ```js class Point { constructor() { // ... } toValue() { // ... } } ``` 这等同于使用ES5的构造函数和原型链方式： ```js Point.prototype = { constructor: Point, toValue: function() { // ... }, }; ``` 在`class`语法中，`constructor`方法是类的默认构造函数，当使用`new`关键字创建类的实例时，它会被自动调用。如果没有显式定义构造函数，JavaScript会提供一个空的无参构造函数。构造函数默认会返回实例对象，但也可以自定义返回值。 ### 2. 实例属性 类的实例属性可以定义在`constructor`方法内部的`this`对象上，或者定义在`prototype`上。定义在`this`上的属性是每个实例独有的，而定义在`prototype`上的属性则被所有实例共享。为了访问或修改类的原型，通常不推荐直接使用`__proto__`，而是应该使用`Object.getPrototypeOf`方法。 ### Class表达式 类也可以用表达式形式定义： ```js const MyClass = class Me { // ... }; ``` 在这个例子中，`Me`是内部引用当前类的名称，但在外部，类的名字是`MyClass`。 ### 特性与注意事项 - **严格模式**：类和模块默认使用严格模式。 - **不存在变量提升**：`class`声明不会被提升到代码的顶部，必须在使用前定义。 - **name属性**：类的`name`属性会返回类名，如`Point.name`将返回`"Point"`。 - **Generator方法**：在类的方法前加上`*`，表示这是一个Generator函数，可以使用`yield`关键字。 - **this的指向**：类的方法内部的`this`默认指向类的实例。但如果在非构造函数中独立调用这个方法，`this`可能会丢失。为了解决这个问题，可以在构造函数中使用`this.method = this.method.bind(this)`来绑定`this`。 ### 继承 ES6的`class`支持继承，使用`extends`关键字： ```js class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 调用父类的构造函数 this.color = color; } // ... } ``` 在这个例子中，`ColorPoint`继承了`Point`的所有属性和方法，并可以添加新的属性和方法。 `class`语法使得JavaScript的面向对象编程更加清晰和简洁，但其底层机制仍然是基于原型链的继承。理解这一点有助于更好地理解和使用ES6的`class`。