箭頭函數 · ES6語法學習

## 箭頭函數 ### 基本用法 ES6 允許使用“箭頭”（`=>`）定義函數。 ~~~javascript var f = v => v; // 等同于 var f = function (v) { return v; }; ~~~ 如果箭頭函數不需要參數或需要多個參數，就使用一個圓括號代表參數部分。 ~~~javascript var f = () => 5; // 等同于 var f = function () { return 5 }; var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2) { return num1 + num2; }; ~~~ 如果箭頭函數的代碼塊部分多于一條語句，就要使用大括號將它們括起來，并且使用`return`語句返回。 ~~~javascript var sum = (num1, num2) => { return num1 + num2; } ~~~ 由于大括號被解釋為代碼塊，所以如果箭頭函數直接返回一個對象，必須在對象外面加上括號，否則會報錯。 ~~~javascript // 報錯 let getTempItem = id => { id: id, name: "Temp" }; // 不報錯 let getTempItem = id => ({ id: id, name: "Temp" }); ~~~ 下面是一種特殊情況，雖然可以運行，但會得到錯誤的結果。 ~~~javascript let foo = () => { a: 1 }; foo() // undefined ~~~ 上面代碼中，原始意圖是返回一個對象`{ a: 1 }`，但是由于引擎認為大括號是代碼塊，所以執行了一行語句`a: 1`。這時，`a`可以被解釋為語句的標簽，因此實際執行的語句是`1;`，然后函數就結束了，沒有返回值。如果箭頭函數只有一行語句，且不需要返回值，可以采用下面的寫法，就不用寫大括號了。 ~~~javascript let fn = () => void doesNotReturn(); ~~~ 箭頭函數可以與變量解構結合使用。 ~~~javascript const full = ({ first, last }) => first + ' ' + last; // 等同于 function full(person) { return person.first + ' ' + person.last; } ~~~ 箭頭函數使得表達更加簡潔。 ~~~javascript const isEven = n => n % 2 === 0; const square = n => n * n; ~~~ 上面代碼只用了兩行，就定義了兩個簡單的工具函數。如果不用箭頭函數，可能就要占用多行，而且還不如現在這樣寫醒目。箭頭函數的一個用處是簡化回調函數。 ~~~javascript // 正常函數寫法 [1,2,3].map(function (x) { return x * x; }); // 箭頭函數寫法 [1,2,3].map(x => x * x); ~~~ 另一個例子是 ~~~javascript // 正常函數寫法 var result = values.sort(function (a, b) { return a - b; }); // 箭頭函數寫法 var result = values.sort((a, b) => a - b); ~~~ 下面是 rest 參數與箭頭函數結合的例子。 ~~~javascript const numbers = (...nums) => nums; numbers(1, 2, 3, 4, 5) // [1,2,3,4,5] const headAndTail = (head, ...tail) => [head, tail]; headAndTail(1, 2, 3, 4, 5) // [1,[2,3,4,5]] ~~~ ### 使用注意點箭頭函數有幾個使用注意點。（1）函數體內的`this`對象，就是定義時所在的對象，而不是使用時所在的對象。（2）不可以當作構造函數，也就是說，不可以使用`new`命令，否則會拋出一個錯誤。（3）不可以使用`arguments`對象，該對象在函數體內不存在。如果要用，可以用 rest 參數代替。（4）不可以使用`yield`命令，因此箭頭函數不能用作 Generator 函數。上面四點中，第一點尤其值得注意。`this`對象的指向是可變的，但是在箭頭函數中，它是固定的。 ~~~javascript function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } var id = 21; foo.call({ id: 42 }); // 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', init: function() { document.addEventListener('click', event => this.doSomething(event.type), false); }, doSomething: function(type) { console.log('Handling ' + type + ' for ' + this.id); } }; ~~~ 上面代碼的`init`方法中，使用了箭頭函數，這導致這個箭頭函數里面的`this`，總是指向`handler`對象。否則，回調函數運行時，`this.doSomething`這一行會報錯，因為此時`this`指向`document`對象。 `this`指向的固定化，并不是因為箭頭函數內部有綁定`this`的機制，實際原因是箭頭函數根本沒有自己的`this`，導致內部的`this`就是外層代碼塊的`this`。正是因為它沒有`this`，所以也就不能用作構造函數。所以，箭頭函數轉成 ES5 的代碼如下。 ~~~javascript // ES6 function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } // ES5 function foo() { var _this = this; setTimeout(function () { console.log('id:', _this.id); }, 100); } ~~~ 上面代碼中，轉換后的 ES5 版本清楚地說明了，箭頭函數里面根本沒有自己的`this`，而是引用外層的`this`。請問下面的代碼之中有幾個`this`？ ~~~javascript function foo() { return () => { return () => { return () => { console.log('id:', this.id); }; }; }; } var f = foo.call({id: 1}); var t1 = f.call({id: 2})()(); // id: 1 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`，以下三個變量在箭頭函數之中也是不存在的，指向外層函數的對應變量：`arguments`、`super`、`new.target`。 ~~~javascript function foo() { setTimeout(() => { console.log('args:', arguments); }, 100); } foo(2, 4, 6, 8) // args: [2, 4, 6, 8] ~~~ 上面代碼中，箭頭函數內部的變量`arguments`，其實是函數`foo`的`arguments`變量。另外，由于箭頭函數沒有自己的`this`，所以當然也就不能用`call()`、`apply()`、`bind()`這些方法去改變`this`的指向。 ~~~javascript (function() { return [ (() => this.x).bind({ x: 'inner' })() ]; }).call({ x: 'outer' }); // ['outer'] ~~~ 上面代碼中，箭頭函數沒有自己的`this`，所以`bind`方法無效，內部的`this`指向外部的`this`。長期以來，JavaScript 語言的`this`對象一直是一個令人頭痛的問題，在對象方法中使用`this`，必須非常小心。箭頭函數”綁定”`this`，很大程度上解決了這個困擾。 ### 不適用場合由于箭頭函數使得`this`從“動態”變成“靜態”，下面兩個場合不應該使用箭頭函數。第一個場合是定義對象的方法，且該方法內部包括`this`。 ~~~javascript const cat = { lives: 9, jumps: () => { this.lives--; } } ~~~ 上面代碼中，`cat.jumps()`方法是一個箭頭函數，這是錯誤的。調用`cat.jumps()`時，如果是普通函數，該方法內部的`this`指向`cat`；如果寫成上面那樣的箭頭函數，使得`this`指向全局對象，因此不會得到預期結果。這是因為對象不構成單獨的作用域，導致`jumps`箭頭函數定義時的作用域就是全局作用域。再看一個例子。 ~~~javascript globalThis.s = 21; const obj = { s: 42, m: () => console.log(this.s) }; obj.m() // 21 ~~~ 上面例子中，`obj.m()`使用箭頭函數定義。JavaScript 引擎的處理方法是，先在全局空間生成這個箭頭函數，然后賦值給`obj.m`，這導致箭頭函數內部的`this`指向全局對象，所以`obj.m()`輸出的是全局空間的`21`，而不是對象內部的`42`。上面的代碼實際上等同于下面的代碼。 ~~~javascript globalThis.s = 21; globalThis.m = () => console.log(this.s); const obj = { s: 42, m: globalThis.m }; obj.m() // 21 ~~~ 由于上面這個原因，對象的屬性建議使用傳統的寫法定義，不要用箭頭函數定義。第二個場合是需要動態`this`的時候，也不應使用箭頭函數。 ~~~javascript var button = document.getElementById('press'); button.addEventListener('click', () => { this.classList.toggle('on'); }); ~~~ 上面代碼運行時，點擊按鈕會報錯，因為`button`的監聽函數是一個箭頭函數，導致里面的`this`就是全局對象。如果改成普通函數，`this`就會動態指向被點擊的按鈕對象。另外，如果函數體很復雜，有許多行，或者函數內部有大量的讀寫操作，不單純是為了計算值，這時也不應該使用箭頭函數，而是要使用普通函數，這樣可以提高代碼可讀性。 ### 嵌套的箭頭函數箭頭函數內部，還可以再使用箭頭函數。下面是一個 ES5 語法的多重嵌套函數。 ~~~javascript function insert(value) { return {into: function (array) { return {after: function (afterValue) { array.splice(array.indexOf(afterValue) + 1, 0, value); return array; }}; }}; } insert(2).into([1, 3]).after(1); //[1, 2, 3] ~~~ 上面這個函數，可以使用箭頭函數改寫。 ~~~javascript let insert = (value) => ({into: (array) => ({after: (afterValue) => { array.splice(array.indexOf(afterValue) + 1, 0, value); return array; }})}); insert(2).into([1, 3]).after(1); //[1, 2, 3] ~~~ 下面是一個部署管道機制（pipeline）的例子，即前一個函數的輸出是后一個函數的輸入。 ~~~javascript const pipeline = (...funcs) => val => funcs.reduce((a, b) => b(a), val); const plus1 = a => a + 1; const mult2 = a => a * 2; const addThenMult = pipeline(plus1, mult2); addThenMult(5) // 12 ~~~ 如果覺得上面的寫法可讀性比較差，也可以采用下面的寫法。 ~~~javascript const plus1 = a => a + 1; const mult2 = a => a * 2; mult2(plus1(5)) // 12 ~~~ 箭頭函數還有一個功能，就是可以很方便地改寫 λ 演算。 ~~~javascript // λ演算的寫法 fix = λf.(λx.f(λv.x(x)(v)))(λx.f(λv.x(x)(v))) // ES6的寫法 var fix = f => (x => f(v => x(x)(v))) (x => f(v => x(x)(v))); ~~~ 上面兩種寫法，幾乎是一一對應的。由于 λ 演算對于計算機科學非常重要，這使得我們可以用 ES6 作為替代工具，探索計算機科學。