edit class

ruanyf · ruanyf · commit 4e1e7385281a · 2015-10-20T13:53:06.000+08:00
diff --git a/docs/class.md b/docs/class.md
@@ -88,9 +88,9 @@ let b = new B();
 b.constructor === B.prototype.constructor // true
 ```
 
-上面代码中，b是B类的实例，它的constructor方法就是B类原型的constructor方法。
+上面代码中，`b`是B类的实例，它的`constructor`方法就是B类原型的`constructor`方法。
 
-由于类的方法（除constructor以外）都定义在prototype对象上面，所以类的新方法可以添加在prototype对象上面。`Object.assign`方法可以很方便地一次向类添加多个方法。
+由于类的方法（除`constructor`以外）都定义在`prototype`对象上面，所以类的新方法可以添加在`prototype`对象上面。`Object.assign`方法可以很方便地一次向类添加多个方法。
 
 ```javascript
 class Point {
@@ -618,7 +618,19 @@ p1.printName() // "Ha"
 
 ## 原生构造函数的继承
 
-原生构造函数是指语言内置的构造函数，通常用来生成数据结构，比如`Array()`。以前，这些原生构造函数是无法继承的，即不能自己定义一个Array的子类。
+原生构造函数是指语言内置的构造函数，通常用来生成数据结构。ECMAScript的原生构造函数大致有下面这些。
+
+- Boolean()
+- Number()
+- String()
+- Array()
+- Date()
+- Function()
+- RegExp()
+- Error()
+- Object()
+
+以前，这些原生构造函数是无法继承的，比如，不能自己定义一个Array的子类。
 
 ```javascript
 function MyArray() {
@@ -635,7 +647,7 @@ MyArray.prototype = Object.create(Array.prototype, {
 });
 ```
 
-上面代码定义了一个继承Array的MyArray类。但是，这个类的行为与Array完全不一致。
+上面代码定义了一个继承Array的`MyArray`类。但是，这个类的行为与Array完全不一致。
 
 ```javascript
 var colors = new MyArray();
@@ -646,9 +658,9 @@ colors.length = 0;
 colors[0]  // "red"
 ```
 
-之所以会发生这种情况，是因为原生构造函数无法外部获取，通过`Array.apply()`或者分配给原型对象都不行。ES5是先新建子类的实例对象this，再将父类的属性添加到子类上，由于父类的属性无法获取，导致无法继承原生的构造函数。
+之所以会发生这种情况，是因为子类无法获得原生构造函数的内部属性，通过`Array.apply()`或者分配给原型对象都不行。ES5是先新建子类的实例对象`this`，再将父类的属性添加到子类上，由于父类的内部属性无法获取，导致无法继承原生的构造函数。比如，Array构造函数有一个内部属性`[[DefineOwnProperty]]`，用来定义新属性时，更新`length`属性，这个内部属性无法在子类获取，导致子类的`length`属性行为不正常。
 
-ES6允许继承原生构造函数定义子类，因为ES6是先新建父类的实例对象this，然后再用子类的构造函数修饰this，使得父类的所有行为都可以继承。下面是一个继承Array的例子。
+ES6允许继承原生构造函数定义子类，因为ES6是先新建父类的实例对象`this`，然后再用子类的构造函数修饰`this`，使得父类的所有行为都可以继承。下面是一个继承Array的例子。
 
 ```javascript
 class MyArray extends Array {
@@ -667,7 +679,7 @@ arr[0] // undefined
 
 上面代码定义了一个MyArray类，继承了Array构造函数，因此就可以从MyArray生成数组的实例。这意味着，ES6可以自定义原生数据结构（比如Array、String等）的子类，这是ES5无法做到的。
 
-上面这个例子也说明，extends关键字不仅可以用来继承类，还可以用来继承原生的构造函数。因此可以在原生数据结构的基础上，定义自己的数据结构。下面就是定义了一个带版本功能的数组。
+上面这个例子也说明，`extends`关键字不仅可以用来继承类，还可以用来继承原生的构造函数。因此可以在原生数据结构的基础上，定义自己的数据结构。下面就是定义了一个带版本功能的数组。
 
 ```javascript
 class VersionedArray extends Array {
@@ -679,14 +691,29 @@ class VersionedArray extends Array {
     this.history.push(this.slice());
   }
   revert() {
-    this.splice(0, this.length, this.history[this.history.length - 1]);
+    this.splice(0, this.length, ...this.history[this.history.length - 1]);
   }
 }
+
+var x = new VersionedArray();
+
+x.push(1);
+x.push(2);
+x // [1, 2]
+x.history // [[]]
+
+x.commit();
+x.history // [[], [1, 2]]
+x.push(3);
+x // [1, 2, 3]
+
+x.revert();
+x // [1, 2]
 ```
 
-上面代码中，VersionedArray结构会通过commit方法，将自己的上一个版本存入history属性，然后通过revert方法，可以撤销当前版本，回到上一个版本。除此之外，VersionedArray依然是一个数组，所有原生的数组方法都可以在它上面调用。
+上面代码中，`VersionedArray`结构会通过`commit`方法，将自己的当前状态存入`history`属性，然后通过`revert`方法，可以撤销当前版本，回到上一个版本。除此之外，`VersionedArray`依然是一个数组，所有原生的数组方法都可以在它上面调用。
 
-下面是一个自定义Error子类的例子。
+下面是一个自定义`Error`子类的例子。
 
 ```javascript
 class ExtendableError extends Error {
@@ -714,7 +741,7 @@ myerror.stack
 //     ...
 ```
 
-## class的取值函数（getter）和存值函数（setter）
+## Class的取值函数（getter）和存值函数（setter）
 
 与ES5一样，在Class内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。
 
diff --git a/docs/function.md b/docs/function.md
@@ -269,7 +269,7 @@ console.log(1, ...[2, 3, 4], 5)
 // 1 2 3 4 5
 
 [...document.querySelectorAll('div')]
-// <- [<div>, <div>, <div>]
+// [<div>, <div>, <div>]
 ```
 
 该运算符主要用于函数调用。
@@ -289,16 +289,24 @@ add(...numbers) // 42
 
 上面代码中，`array.push(...items)`和`add(...numbers)`这两行，都是函数的调用，它们的都使用了扩展运算符。该运算符将一个数组，变为参数序列。
 
-由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。
+扩展运算符与正常的函数参数可以结合使用，非常灵活。
+
+```javascript
+function f(v, w, x, y, z) { }
+var args = [0, 1];
+f(-1, ...args, 2, ...[3]);
+```
+
+由于扩展运算符可以展开数组，所以不再需要`apply`方法，将数组转为函数的参数了。
 
 ```javascript
 // ES5的写法
-function f (x, y, z){}
+function f(x, y, z) {}
 var args = [0, 1, 2];
 f.apply(null, args);
 
 // ES6的写法
-function f (x, y, z){}
+function f(x, y, z) {}
 var args = [0, 1, 2];
 f(...args);
 ```
@@ -334,14 +342,6 @@ arr1.push(...arr2);
 
 上面代码的ES5写法中，`push`方法的参数不能是数组，所以只好通过`apply`方法变通使用`push`方法。有了扩展运算符，就可以直接将数组传入`push`方法。
 
-扩展运算符与正常的函数参数可以结合使用，非常灵活。
-
-```javascript
-function f(v, w, x, y, z) { }
-var args = [0, 1];
-f(-1, ...args, 2, ...[3]);
-```
-
 扩展运算符可以简化很多种ES5的写法。
 
 ```javascript
@@ -366,6 +366,22 @@ new (Date.bind.apply(Date, [null, 2015, 1, 1]))
 new Date(...[2015, 1, 1]);
 ```
 
+上面的第一个例子，其实提供了数组合并的新写法。
+
+```javascript
+var arr1 = ['a', 'b'];
+var arr2 = ['c'];
+var arr3 = ['d', 'e'];
+
+// ES5的合并数组
+arr1.concat(arr2, arr3));
+// [ 'a', 'b', 'c', 'd', 'e' ]
+
+// ES6的合并数组
+[...arr1, ...arr2, ...arr3]
+// [ 'a', 'b', 'c', 'd', 'e' ]
+```
+
 扩展运算符也可以与解构赋值结合起来，用于生成数组。
 
 ```javascript
@@ -380,14 +396,6 @@ rest  // []:
 const [first, ...rest] = ["foo"];
 first  // "foo"
 rest   // []
-
-const [first, ...rest] = ["foo", "bar"];
-first // "foo"
-rest  // ["bar"]
-
-const [first, ...rest] = ["foo", "bar", "baz"];
-first // "foo"
-rest  // ["bar","baz"]
 ```
 
 如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。
