ES6箭頭函數(節選自《ECMAScript 6 入門》)
基本用法
ES6 允許使用“箭頭”(=>
)定義函數。
var f = v => v;
上面的箭頭函數等同於:
var f = function(v) { return v; };
如果箭頭函數不需要參數或需要多個參數,就使用一個圓括號代表參數部分。
var f = () => 5; // 等同於 var f = function () { return 5 }; var sum = (num1, num2) => num1 + num2; // 等同於 var sum = function(num1, num2) { return num1 + num2; };
如果箭頭函數的代碼塊部分多於一條語句,就要使用大括號將它們括起來,並且使用return
語句返回。
var sum = (num1, num2) => { return num1 + num2; }
由於大括號被解釋為代碼塊,所以如果箭頭函數直接返回一個對象,必須在對象外面加上括號。
var getTempItem = id => ({ id: id, name: "Temp" });
箭頭函數可以與變量解構結合使用。
const full = ({ first, last }) => first + ‘ ‘ + last; // 等同於 functionfull(person) { return person.first + ‘ ‘ + person.last; }
箭頭函數使得表達更加簡潔。
const isEven = n => n % 2 == 0;
const square = n => n * n;
上面代碼只用了兩行,就定義了兩個簡單的工具函數。如果不用箭頭函數,可能就要占用多行,而且還不如現在這樣寫醒目。
箭頭函數的一個用處是簡化回調函數。
// 正常函數寫法 [1,2,3].map(function (x) { return x * x; }); // 箭頭函數寫法 [1,2,3].map(x => x * x);
另一個例子是
// 正常函數寫法 var result = values.sort(function (a, b) { return a - b; }); // 箭頭函數寫法 var result = values.sort((a, b) => a - b);
下面是 rest 參數與箭頭函數結合的例子。
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
對象的指向是可變的,但是在箭頭函數中,它是固定的。
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
,綁定定義時所在的作用域,而不是指向運行時所在的作用域。下面是另一個例子。
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 事件的回調函數封裝在一個對象裏面。
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 的代碼如下。
// 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
?
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
。
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
的指向。
(function() { return [ (() => this.x).bind({ x: ‘inner‘ })() ]; }).call({ x: ‘outer‘ }); // [‘outer‘]
上面代碼中,箭頭函數沒有自己的this
,所以bind
方法無效,內部的this
指向外部的this
。
長期以來,JavaScript 語言的this
對象一直是一個令人頭痛的問題,在對象方法中使用this
,必須非常小心。箭頭函數”綁定”this
,很大程度上解決了這個困擾。
嵌套的箭頭函數
箭頭函數內部,還可以再使用箭頭函數。下面是一個 ES5 語法的多重嵌套函數。
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]
上面這個函數,可以使用箭頭函數改寫。
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)的例子,即前一個函數的輸出是後一個函數的輸入。
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
如果覺得上面的寫法可讀性比較差,也可以采用下面的寫法。
const plus1 = a => a + 1; const mult2 = a => a * 2; mult2(plus1(5)) // 12
箭頭函數還有一個功能,就是可以很方便地改寫λ演算。
// λ演算的寫法 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作為替代工具,探索計算機科學。
附:《ECMAScript 6 入門》http://es6.ruanyifeng.com/
ES6箭頭函數(節選自《ECMAScript 6 入門》)