箭頭函數 · JS與WEB前端框架技術

**箭頭函數表達式**的語法比[函數表達式](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/function)更簡潔，并且沒有自己的[this](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this)，[arguments](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments)，[super](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/super)或?[new.target](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new.target)。這些函數表達式更適用于那些本來需要匿名函數的地方，并且它們不能用作構造函數。 ## 語法 > ### 基礎語法 ~~~js (參數1, 參數2, …, 參數N) => { 函數聲明 } //相當于：(參數1, 參數2, …, 參數N) =>{ return 表達式; } (參數1, 參數2, …, 參數N) => 表達式（單一） // 當只有一個參數時，圓括號是可選的： (單一參數) => {函數聲明} 單一參數 => {函數聲明} // 沒有參數的函數應該寫成一對圓括號。 () => {函數聲明} ~~~ ### 高級語法 > ~~~js > //加括號的函數體返回對象字面表達式： > 參數=> ({foo: bar}) > > //支持剩余參數和默認參數 > (參數1, 參數2, ...rest) => {函數聲明} > (參數1 = 默認值1,參數2, …, 參數N = 默認值N) => {函數聲明} > > //同樣支持參數列表解構 > let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; > f(); // 6 > ~~~ ## 描述引入箭頭函數有兩個方面的作用：更簡短的函數并且不綁定`this`。 ### 更短的函數 ~~~js var elements = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium' ]; elements.map(function(element) { return element.length; }); // 返回數組：[8, 6, 7, 9] // 上面的普通函數可以改寫成如下的箭頭函數 elements.map((element) => { return element.length; }); // [8, 6, 7, 9] // 當箭頭函數只有一個參數時，可以省略參數的圓括號 elements.map(element => { return element.length; }); // [8, 6, 7, 9] // 當箭頭函數的函數體只有一個 `return` 語句時，可以省略 `return` 關鍵字和方法體的花括號 elements.map(element => element.length); // [8, 6, 7, 9] // 在這個例子中，因為我們只需要 `length` 屬性，所以可以使用參數解構 // 需要注意的是字符串 `"length"` 是我們想要獲得的屬性的名稱，而 `lengthFooBArX` 則只是個變量名， // 可以替換成任意合法的變量名 elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9] ~~~ ### 不綁定this 在箭頭函數出現之前，每個新定義的函數都有它自己的this值（在構造函數的情況下是一個新對象，在嚴格模式的函數調用中為 undefined，如果該函數被作為“對象方法”調用則為基礎對象等）。`this`被證明是令人厭煩的面向對象風格的編程。 ~~~js function Person() { // Person() 構造函數定義 `this`作為它自己的實例. this.age = 0; setInterval(function growUp() { // 在非嚴格模式, growUp()函數定義 `this`作為全局對象, // 與在 Person()構造函數中定義的 `this`并不相同. this.age++; }, 1000); } var p = new Person(); ~~~ 在ECMAScript 3/5中，通過將`this`值分配給封閉的變量，可以解決`this`問題。 ~~~js function Person() { var that = this; that.age = 0; setInterval(function growUp() { // 回調引用的是`that`變量, 其值是預期的對象. that.age++; }, 1000); } ~~~ 或者，可以創建[綁定函數](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)，以便將預先分配的`this`值傳遞到綁定的目標函數（上述示例中的`growUp()`函數）。箭頭函數不會創建自己的`this,它只會從自己的作用域鏈的上一層繼承this`。因此，在下面的代碼中，傳遞給`setInterval`的函數內的`this`與封閉函數中的`this`值相同： ~~~js function Person(){ this.age = 0; setInterval(() => { this.age++; // |this| 正確地指向 p 實例 }, 1000); } var p = new Person(); ~~~ #### 與嚴格模式的關系鑒于?`this`?是詞法層面上的，[嚴格模式](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)中與?`this`?相關的規則都將被忽略。 ~~~js function Person() { this.age = 0; var closure = "123" setInterval(function growUp() { this.age++; console.log(closure) }, 1000); } var p = new Person(); function PersonX() { 'use strict' this.age = 0; var closure = "123" setInterval(()=>{ this.age++; console.log(closure) }, 1000); } var px = new PersonX(); ~~~ 嚴格模式的其他規則依然不變. #### 通過 call 或?apply 調用由于箭頭函數沒有自己的this指針，通過?`call()`*?或*?`apply()`?方法調用一個函數時，只能傳遞參數（不能綁定this---譯者注），他們的第一個參數會被忽略。（這種現象對于bind方法同樣成立---譯者注） ~~~js var adder = { base : 1, add : function(a) { var f = v => v + this.base; return f(a); }, addThruCall: function(a) { var f = v => v + this.base; var b = { base : 2 }; return f.call(b, a); } }; console.log(adder.add(1)); // 輸出 2 console.log(adder.addThruCall(1)); // 仍然輸出 2（而不是3 ——譯者注） ~~~ ### 不綁定`arguments` 箭頭函數不綁定[Arguments 對象](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments)。因此，在本示例中，`arguments`只是引用了封閉作用域內的arguments： ~~~js var arguments = [1, 2, 3]; var arr = () => arguments[0]; arr(); // 1 function foo(n) { var f = () => arguments[0] + n; // 隱式綁定 foo 函數的 arguments 對象. arguments[0] 是 n return f(); } foo(1); // 2 ~~~ 在大多數情況下，使用[剩余參數](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters)是相較使用`arguments`對象的更好選擇。 ~~~js function foo(arg) { var f = (...args) => args[0]; return f(arg); } foo(1); // 1 function foo(arg1,arg2) { var f = (...args) => args[1]; return f(arg1,arg2); } foo(1,2); //2 ~~~ ### 像函數一樣使用箭頭函數如上所述，箭頭函數表達式對非方法函數是最合適的。讓我們看看當我們試著把它們作為方法時發生了什么。 ~~~js 'use strict'; var obj = { i: 10, b: () => console.log(this.i, this), c: function() { console.log( this.i, this) } } obj.b(); // undefined, Window{...} obj.c(); // 10, Object {...} ~~~ 箭頭函數沒有定義this綁定。另一個涉及[`Object.defineProperty()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty "Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性，并返回這個對象。")的示例： ~~~js 'use strict'; var obj = { a: 10 }; Object.defineProperty(obj, "b", { get: () => { console.log(this.a, typeof this.a, this); return this.a+10; // 代表全局對象 'Window', 因此 'this.a' 返回 'undefined' } }); obj.b; // undefined "undefined" Window {postMessage: ?, blur: ?, focus: ?, close: ?, frames: Window, …} ~~~ ### 使用?`new`?操作符箭頭函數不能用作構造器，和`new`一起用會拋出錯誤。 ~~~js var Foo = () => {}; var foo = new Foo(); // TypeError: Foo is not a constructor ~~~ ### 使用`prototype`屬性箭頭函數沒有`prototype`屬性。 ~~~js var Foo = () => {}; console.log(Foo.prototype); // undefined ~~~ ## 函數體箭頭函數可以有一個“簡寫體”或常見的“塊體”。在一個簡寫體中，只需要一個表達式，并附加一個隱式的返回值。在塊體中，必須使用明確的`return`語句。 ~~~js var func = x => x * x; // 簡寫函數省略return var func = (x, y) => { return x + y; }; //常規編寫明確的返回值 ~~~ ## 返回對象字面量記住用`params => {object:literal}`這種簡單的語法返回對象字面量是行不通的。 ~~~js var func = () => { foo: 1 }; // Calling func() returns undefined! var func = () => { foo: function() {} }; // SyntaxError: function statement requires a name ~~~ 這是因為花括號（`{}`）里面的代碼被解析為一系列語句（即?`foo`?被認為是一個標簽，而非對象字面量的組成部分）。所以，記得用圓括號把對象字面量包起來： ~~~js var func = () => ({foo: 1}); ~~~ ## 換行箭頭函數在參數和箭頭之間不能換行。 ~~~js var func = () => 1; // SyntaxError: expected expression, got '=>' ~~~ ## 解析順序雖然箭頭函數中的箭頭不是運算符，但箭頭函數具有與常規函數不同的特殊[運算符優先級](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)解析規則。 ~~~js let callback; callback = callback || function() {}; // ok callback = callback || () => {}; // SyntaxError: invalid arrow-function arguments callback = callback || (() => {}); // ok ~~~ ## 更多示例 ~~~js // 空的箭頭函數返回 undefined let empty = () => {}; (() => 'foobar')(); // Returns "foobar" // (這是一個立即執行函數表達式,可參閱 'IIFE'術語表) var simple = a => a > 15 ? 15 : a; simple(16); // 15 simple(10); // 10 let max = (a, b) => a > b ? a : b; // Easy array filtering, mapping, ... var arr = [5, 6, 13, 0, 1, 18, 23]; var sum = arr.reduce((a, b) => a + b); // 66 var even = arr.filter(v => v % 2 == 0); // [6, 0, 18] var double = arr.map(v => v * 2); // [10, 12, 26, 0, 2, 36, 46] // 更簡明的promise鏈 promise.then(a => { // ... }).then(b => { // ... }); // 無參數箭頭函數在視覺上容易分析 setTimeout( () => { console.log('I happen sooner'); setTimeout( () => { // deeper code console.log('I happen later'); }, 1); }, 1); ~~~ #### 箭頭函數也可以使用條件（三元）運算符： ~~~js var simple = a => a > 15 ? 15 : a; simple(16); // 15 simple(10); // 10 let max = (a, b) => a > b ? a : b; ~~~ > 箭頭函數內定義的變量及其作用域 ~~~js // 常規寫法 var greeting = () => {let now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));} greeting(); //"Good day." console.log(now); // ReferenceError: now is not defined 標準的let作用域 // 參數括號內定義的變量是局部變量（默認參數） var greeting = (now=new Date()) => "Good" + (now.getHours() > 17 ? " evening." : " day."); greeting(); //"Good day." console.log(now); // ReferenceError: now is not defined // 對比：函數體內{}不使用var定義的變量是全局變量 var greeting = () => {now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));} greeting(); //"Good day." console.log(now); // Fri Dec 22 2017 10:01:00 GMT+0800 (中國標準時間) // 對比：函數體內{} 用var定義的變量是局部變量 var greeting = () => {var now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));} greeting(); //"Good day." console.log(now); // ReferenceError: now is not defined ~~~ > #### 箭頭函數也可以使用閉包： ~~~js // 標準的閉包函數 function A(){ var i=0; return function b(){ return (++i); }; }; var v=A(); v(); //1 v(); //2 //箭頭函數體的閉包（ i=0 是默認參數） var Add = (i=0) => {return (() => (++i) )}; var v = Add(); v(); //1 v(); //2 //因為僅有一個返回，return 及括號（）也可以省略 var Add = (i=0)=> ()=> (++i); ~~~ > #### ?箭頭函數遞歸 ~~~js var fact = (x) => ( x==0 ? 1 : x*fact(x-1) ); fact(5); // 120 ~~~