docs(class-extends): edit text

ruanyf · ruanyf · commit b3619879a87d · 2022-01-24T14:35:02.000+08:00
diff --git a/docs/class-extends.md b/docs/class-extends.md
@@ -2,7 +2,7 @@
 
 ## 简介
 
-Class 可以通过`extends`关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。
+Class 可以通过`extends`关键字实现继承，让子类继承父类的属性和方法。extends 的写法比 ES5 的原型链继承，要清晰和方便很多。
 
 ```javascript
 class Point {
@@ -12,9 +12,13 @@ class ColorPoint extends Point {
 }
 ```
 
-上面代码定义了一个`ColorPoint`类，该类通过`extends`关键字，继承了`Point`类的所有属性和方法。但是由于没有部署任何代码，所以这两个类完全一样，等于复制了一个`Point`类。下面，我们在`ColorPoint`内部加上代码。
+上面示例中，`Point`是父类，`ColorPoint`是子类，它通过`extends`关键字，继承了`Point`类的所有属性和方法。但是由于没有部署任何代码，所以这两个类完全一样，等于复制了一个`Point`类。
+
+下面，我们在`ColorPoint`内部加上代码。
 
 ```javascript
+class Point { /* ... */ }
+
 class ColorPoint extends Point {
   constructor(x, y, color) {
     super(x, y); // 调用父类的constructor(x, y)
@@ -27,9 +31,9 @@ class ColorPoint extends Point {
 }
 ```
 
-上面代码中，`constructor`方法和`toString`方法之中，都出现了`super`关键字，它在这里表示父类的构造函数，用来新建父类的`this`对象。
+上面示例中，`constructor()`方法和`toString()`方法内部，都出现了`super`关键字。`super`在这里表示父类的构造函数，用来新建一个父类的实例对象。
 
-子类必须在`constructor`方法中调用`super`方法，否则新建实例时会报错。这是因为子类自己的`this`对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用`super`方法，子类就得不到`this`对象。
+ES6 规定，子类必须在`constructor()`方法中调用`super()`，否则就会报错。这是因为子类自己的`this`对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法。如果不调用`super()`方法，子类就得不到自己的`this`对象。
 
 ```javascript
 class Point { /* ... */ }
@@ -42,25 +46,34 @@ class ColorPoint extends Point {
 let cp = new ColorPoint(); // ReferenceError
 ```
 
-上面代码中，`ColorPoint`继承了父类`Point`，但是它的构造函数没有调用`super`方法，导致新建实例时报错。
+上面代码中，`ColorPoint`继承了父类`Point`，但是它的构造函数没有调用`super()`，导致新建实例时报错。
 
-ES5 的继承，实质是先创造子类的实例对象`this`，然后再将父类的方法添加到`this`上面（`Parent.apply(this)`）。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到`this`上面（所以必须先调用`super`方法），然后再用子类的构造函数修改`this`。
+为什么子类的构造函数，一定要调用`super()`？原因就在于 ES6 的继承机制，与 ES5 完全不同。ES5 的继承机制，是先创造一个独立的子类的实例对象，然后再将父类的方法添加到这个对象上面，即“实例在前，继承在后”。ES6 的继承机制，则是先将父类的属性和方法，加到一个空的对象上面，然后再将该对象作为子类的实例，即“继承在前，实例在后”。这就是为什么 ES6 的继承必须先调用`super()`方法，因为这一步会生成一个继承父类的`this`对象，没有这一步就无法继承父类。
 
-如果子类没有定义`constructor`方法，这个方法会被默认添加，代码如下。也就是说，不管有没有显式定义，任何一个子类都有`constructor`方法。
+注意，这意味着新建子类实例时，父类的构造函数必定会先运行一次。
 
 ```javascript
-class ColorPoint extends Point {
+class Foo {
+  constructor() {
+    console.log(1);
+  }
 }
 
-// 等同于
-class ColorPoint extends Point {
-  constructor(...args) {
-    super(...args);
+class Bar extends Foo {
+  constructor() {
+    super();
+    console.log(2);
   }
 }
+
+const bar = new Bar();
+// 1
+// 2
 ```
 
-另一个需要注意的地方是，在子类的构造函数中，只有调用`super`之后，才可以使用`this`关键字，否则会报错。这是因为子类实例的构建，基于父类实例，只有`super`方法才能调用父类实例。
+上面示例中，子类 Bar 新建实例时，会输出1和2。原因就是子类构造函数调用`super()`时，会执行一次父类构造函数。
+
+另一个需要注意的地方是，在子类的构造函数中，只有调用`super()`之后，才可以使用`this`关键字，否则会报错。这是因为子类实例的构建，必须先完成父类的继承，只有`super()`方法才能让子类实例继承父类。
 
 ```javascript
 class Point {
@@ -79,9 +92,23 @@ class ColorPoint extends Point {
 }
 ```
 
-上面代码中，子类的`constructor`方法没有调用`super`之前，就使用`this`关键字，结果报错，而放在`super`方法之后就是正确的。
+上面代码中，子类的`constructor()`方法没有调用`super()`之前，就使用`this`关键字，结果报错，而放在`super()`之后就是正确的。
+
+如果子类没有定义`constructor()`方法，这个方法会默认添加，并且里面会调用`super()`。也就是说，不管有没有显式定义，任何一个子类都有`constructor()`方法。
+
+```javascript
+class ColorPoint extends Point {
+}
+
+// 等同于
+class ColorPoint extends Point {
+  constructor(...args) {
+    super(...args);
+  }
+}
+```
 
-下面是生成子类实例的代码。
+有了子类的定义，就可以生成子类的实例了。
 
 ```javascript
 let cp = new ColorPoint(25, 8, 'green');
@@ -90,9 +117,9 @@ cp instanceof ColorPoint // true
 cp instanceof Point // true
 ```
 
-上面代码中，实例对象`cp`同时是`ColorPoint`和`Point`两个类的实例，这与 ES5 的行为完全一致。
+上面示例中，实例对象`cp`同时是`ColorPoint`和`Point`两个类的实例，这与 ES5 的行为完全一致。
 
-最后，父类的静态方法，也会被子类继承。
+除了私有属性，父类的所有属性和方法，都会被子类继承，其中包括静态方法。
 
 ```javascript
 class A {
@@ -109,11 +136,56 @@ B.hello()  // hello world
 
 上面代码中，`hello()`是`A`类的静态方法，`B`继承`A`，也继承了`A`的静态方法。
 
+子类无法继承父类的私有属性，或者说，私有属性只能在定义它的 clss 里面使用。
+
+```javascript
+class Foo {
+  #p = 1;
+  #m() {
+    console.log('hello');
+  }
+}
+
+class Bar extends Foo {
+  constructor() {
+    super();
+    console.log(this.#p); // 报错
+    this.#m(); // 报错
+  }
+}
+```
+
+上面示例中，子类 Bar 调用父类 Foo 的私有属性或私有方法，都会报错。
+
+如果父类定义了私有属性的读写方法，子类就可以通过这些方法，读写私有属性。
+
+```javascript
+class Foo {
+  #p = 1;
+  getP() {
+    return this.#p;
+  }
+}
+
+class Bar extends Foo {
+  constructor() {
+    super();
+    console.log(this.getP()); // 1
+  }
+}
+```
+
+上面示例中，`getP()`是父类用来读取私有属性的方法，通过该方法，子类就可以读到父类的私有属性。
+
 ## Object.getPrototypeOf()
 
-`Object.getPrototypeOf`方法可以用来从子类上获取父类。
+`Object.getPrototypeOf()`方法可以用来从子类上获取父类。
 
 ```javascript
+class Point { /*...*/ }
+
+class ColorPoint extends Point { /*...*/ }
+
 Object.getPrototypeOf(ColorPoint) === Point
 // true
 ```
