doc(generator): generator 函数模拟构造函数

2024-04-21 12:32:22 +00:00 · 2016-05-11 07:47:54 +08:00
parent 71b13a4351
commit e6c5f9e1ff
3 changed files with 90 additions and 77 deletions
@@ -730,7 +730,7 @@ var f = function(v) {
 ```javascript
 var f = () => 5;
 // 等同于
-var f = function (){ return 5 };
+var f = function () { return 5 };

 var sum = (num1, num2) => num1 + num2;
 // 等同于
@@ -739,7 +739,7 @@ var sum = function(num1, num2) {
 };
 ```

-如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。
+如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用`return`语句返回。

 ```javascript
 var sum = (num1, num2) => { return num1 + num2; }
@@ -757,7 +757,7 @@ var getTempItem = id => ({ id: id, name: "Temp" });
 const full = ({ first, last }) => first + ' ' + last;

 // 等同于
-function full( person ){
+function full( person ) {
  return person.first + ' ' + person.last;
 }
 ```
@@ -787,7 +787,7 @@ const square = n => n * n;

 ```javascript
 // 正常函数写法
-var result = values.sort(function(a, b) {
+var result = values.sort(function (a, b) {
  return a - b;
 });

@@ -826,8 +826,8 @@ headAndTail(1, 2, 3, 4, 5)
 ```javascript
 function foo() {
  setTimeout( () => {
-    console.log("id:", this.id);
-  },100);
+    console.log('id:', this.id);
+  }, 100);
 }

 var id = 21;
@@ -838,37 +838,49 @@ foo.call( { id: 42 } );

 上面代码中，`setTimeout`的参数是一个箭头函数，这个箭头函数的定义生效是在`foo`函数生成时，而它的真正执行要等到100毫秒后。如果是普通函数，执行时`this`应该指向全局对象`window`，这时应该输出`21`。但是，箭头函数导致`this`总是指向函数定义生效时所在的对象（本例是`{id: 42}`），所以输出的是`42`。

-下面是另一个例子。
+箭头函数可以让`setTimeout`里面的`this`，绑定定义时所在的作用域，而不是指向运行时所在的作用域。下面是另一个例子。
+
+```javascript
+function Timer () {
+  this.s1 = 0;
+  this.s2 = 0;
+  // 箭头函数
+  setInterval(() => this.s1++, 1000);
+  // 普通函数
+  setInterval(function () {
+    this.s2++;
+  }, 1000);
+}
+
+var timer = new Timer();
+
+setTimeout(() => console.log('s1: ', timer.s1), 3100);
+setTimeout(() => console.log('s2: ', timer.s2), 3100);
+// s1: 3
+// s2: 0
+```
+
+上面代码中，`Timer`函数内部设置了两个定时器，分别使用了箭头函数和普通函数。前者的`this`绑定定义时所在的作用域（即`Timer`函数），后者的`this`指向运行时所在的作用域（即全局对象）。所以，3100毫秒之后，`timer.s1`被更新了3次，而`timer.s2`一次都没更新。
+
+箭头函数可以让`this`指向固定化，这种特性很有利于封装回调函数。下面是一个例子，DOM事件的回调函数封装在一个对象里面。

 ```javascript
 var handler = {
-  id: "123456",
+  id: '123456',

  init: function() {
-    document.addEventListener("click",
+    document.addEventListener('click',
      event => this.doSomething(event.type), false);
  },

  doSomething: function(type) {
-    console.log("Handling " + type  + " for " + this.id);
+    console.log('Handling ' + type  + ' for ' + this.id);
  }
 };
 ```

 上面代码的`init`方法中，使用了箭头函数，这导致这个箭头函数里面的`this`，总是指向`handler`对象。否则，回调函数运行时，`this.doSomething`这一行会报错，因为此时`this`指向`document`对象。

-```javascript
-function Timer () {
-  this.seconds = 0
-  setInterval(() => this.seconds++, 1000)
-}
-var timer = new Timer()
-setTimeout(() => console.log(timer.seconds), 3100)
-// 3
-```
-
-上面代码中，`Timer`函数内部的`setInterval`调用了`this.seconds`属性，通过箭头函数让`this`总是指向`Timer`的实例对象。否则，输出结果是0，而不是3。
-
 `this`指向的固定化，并不是因为箭头函数内部有绑定`this`的机制，实际原因是箭头函数根本没有自己的`this`，导致内部的`this`就是外层代码块的`this`。正是因为它没有`this`，所以也就不能用作构造函数。

 所以，箭头函数转成ES5的代码如下。
@@ -877,7 +889,7 @@ setTimeout(() => console.log(timer.seconds), 3100)
 // ES6
 function foo() {
  setTimeout( () => {
-    console.log("id:", this.id);
+    console.log('id:', this.id);
  },100);
 }

@@ -886,12 +898,12 @@ function foo() {
  var _this = this;

  setTimeout(function () {
-    console.log("id:", _this.id);
+    console.log('id:', _this.id);
  }, 100);
 }
 ```

-上面代码中，箭头函数转成ES5代码时，内部的`this`需要改为引用外部的`this`。
+上面代码中，转换后的ES5版本清楚地说明了，箭头函数里面根本没有自己的`this`，而是引用外层的`this`。

 请问下面的代码之中有几个`this`？

@@ -900,7 +912,7 @@ function foo() {
  return () => {
    return () => {
      return () => {
-        console.log(`id:`, this.id);
+        console.log('id:', this.id);
      };
    };
  };
@@ -913,18 +925,18 @@ var t2 = f().call({id: 3})(); // id: 1
 var t3 = f()().call({id: 4}); // id: 1
 ```

-上面代码之中，只有一个`this`，就是函数`foo`的`this`，所以`t1`、`t2`、`t3`都输出同样的结果。因为所有的内层函数都是箭头函数，都没有自己的`this`，所以它们的`this`其实都是最外层`foo`函数的`this`。
+上面代码之中，只有一个`this`，就是函数`foo`的`this`，所以`t1`、`t2`、`t3`都输出同样的结果。因为所有的内层函数都是箭头函数，都没有自己的`this`，它们的`this`其实都是最外层`foo`函数的`this`。

 除了`this`，以下三个变量在箭头函数之中也是不存在的，指向外层函数的对应变量：`arguments`、`super`、`new.target`。

 ```javascript
 function foo() {
-   setTimeout( () => {
-      console.log("args:", arguments);
-   },100);
+  setTimeout(() => {
+    console.log('args:', arguments);
+  }, 100);
 }

-foo( 2, 4, 6, 8 );
+foo(2, 4, 6, 8)
 // args: [2, 4, 6, 8]
 ```

@@ -1041,87 +1041,87 @@ obj.a // undefined

 上面代码中，Generator函数`g`在`this`对象上面添加了一个属性`a`，但是`obj`对象拿不到这个属性。

+Generator函数也不能跟`new`命令一起用，会报错。

 ```javascript
-function* F(){
+function* F() {
  yield this.x = 2;
  yield this.y = 3;
 }
+
+new F()
+// TypeError: F is not a constructor
 ```

-上面代码中，函数F是一个构造函数，又是一个Generator函数。这时，使用new命令就无法生成F的实例了，因为F返回的是一个内部指针。
+上面代码中，`new`命令跟构造函数`F`一起使用，结果报错，因为`F`不是构造函数。
+
+那么，有没有办法让Generator函数返回一个正常的对象实例，既可以用`next`方法，又可以获得正常的`this`？
+
+下面是一个变通方法。首先，生成一个空对象，使用`bind`方法绑定Generator函数内部的`this`。这样，构造函数调用以后，这个空对象就是Generator函数的实例对象了。

 ```javascript
-'next' in (new F())
-// true
-```
-
-上面代码中，由于`new F()`返回的是一个Iterator对象，具有next方法，所以上面的表达式为true。
-
-如果要把Generator函数当作正常的构造函数使用，可以采用下面的变通方法。首先，生成一个空对象，使用`bind`方法绑定Generator函数内部的`this`。这样，构造函数调用以后，这个空对象就是Generator函数的实例对象了。
-
-```javascript
-function* F(){
-  yield this.x = 2;
-  yield this.y = 3;
+function* F() {
+  this.a = 1;
+  yield this.b = 2;
+  yield this.c = 3;
 }
 var obj = {};
-var f = F.bind(obj)();
+var f = F.call(obj);

 f.next();  // Object {value: 2, done: false}
 f.next();  // Object {value: 3, done: false}
 f.next();  // Object {value: undefined, done: true}

-obj // { x: 2, y: 3 }
+obj.a // 1
+obj.b // 2
+obj.c // 3
 ```

 上面代码中，首先是`F`内部的`this`对象绑定`obj`对象，然后调用它，返回一个Iterator对象。这个对象执行三次`next`方法（因为`F`内部有两个`yield`语句），完成F内部所有代码的运行。这时，所有内部属性都绑定在`obj`对象上了，因此`obj`对象也就成了`F`的实例。

-## Generator函数推导
+上面代码中，执行的是遍历器对象`f`，但是生成的对象实例是`obj`，有没有办法将这两个对象统一呢？

-ES7在数组推导的基础上，提出了Generator函数推导（Generator comprehension）。
+一个办法就是将`obj`换成`F.prototype`。

 ```javascript
-let generator = function* () {
-  for (let i = 0; i < 6; i++) {
-    yield i;
-  }
+function* F() {
+  this.a = 1;
+  yield this.b = 2;
+  yield this.c = 3;
 }
+var f = F.call(F.prototype);

-let squared = ( for (n of generator()) n * n );
-// 等同于
-// let squared = Array.from(generator()).map(n => n * n);
+f.next();  // Object {value: 2, done: false}
+f.next();  // Object {value: 3, done: false}
+f.next();  // Object {value: undefined, done: true}

-console.log(...squared);
-// 0 1 4 9 16 25
+f.a // 1
+f.b // 2
+f.c // 3
 ```

-“推导”这种语法结构，不仅可以用于数组，ES7将其推广到了Generator函数。for...of循环会自动调用遍历器的next方法，将返回值的value属性作为数组的一个成员。
-
-Generator函数推导是对数组结构的一种模拟，它的最大优点是惰性求值，即直到真正用到时才会求值，这样可以保证效率。请看下面的例子。
+再将`F`改成构造函数，就可以对它执行`new`命令了。

 ```javascript
-let bigArray = new Array(100000);
-for (let i = 0; i < 100000; i++) {
-  bigArray[i] = i;
+function* gen() {
+  this.a = 1;
+  yield this.b = 2;
+  yield this.c = 3;
 }

-let first = bigArray.map(n => n * n)[0];
-console.log(first);
-```
-
-上面例子遍历一个大数组，但是在真正遍历之前，这个数组已经生成了，占用了系统资源。如果改用Generator函数推导，就能避免这一点。下面代码只在用到时，才会生成一个大数组。
-
-```javascript
-let bigGenerator = function* () {
-  for (let i = 0; i < 100000; i++) {
-    yield i;
-  }
+function F() {
+  return gen.call(gen.prototype);
 }

-let squared = ( for (n of bigGenerator()) n * n );
+var f = new F();

-console.log(squared.next());
+f.next();  // Object {value: 2, done: false}
+f.next();  // Object {value: 3, done: false}
+f.next();  // Object {value: undefined, done: true}
+
+f.a // 1
+f.b // 2
+f.c // 3
 ```

 ## 含义
@@ -76,6 +76,7 @@
 - Ragan Wald, [Destructuring and Recursion in ES6](http://raganwald.com/2015/02/02/destructuring.html): rest参数和扩展运算符的详细介绍
 - Axel Rauschmayer, [The names of functions in ES6](http://www.2ality.com/2015/09/function-names-es6.html): 函数的name属性的详细介绍
 - Kyle Simpson, [Arrow This](http://blog.getify.com/arrow-this/): 箭头函数并没有自己的this
+- Derick Bailey, [Do ES6 Arrow Functions Really Solve “this” In JavaScript?](http://derickbailey.com/2015/09/28/do-es6-arrow-functions-really-solve-this-in-javascript/)：使用箭头函数处理this指向，必须非常小心
 - Mark McDonnell, [Understanding recursion in functional JavaScript programming](http://www.integralist.co.uk/posts/js-recursion.html): 如何自己实现尾递归优化

 ## 对象