ES6標準新增了一種新的函數:Arrow Function(箭頭函數)。之所以叫箭頭函數,是因爲它的定義用的就是一個箭頭:
var f = x => x * x;
上面的箭頭函數相當於:
var f = function(x){
return x * x;
};
可以看到使用箭頭函數後代碼簡潔了很多。可以這麼理解,箭頭的左邊是函數參數,右邊是函數體。
關於箭頭左側:如果箭頭函數不需要參數或需要多個參數,就使用一個圓括號代表參數部分,當函數只有一個參數時可以省略箭頭左邊的圓括號。
關於箭頭右側:如果箭頭函數的代碼塊大於一行,需要用大括號包起來使用,由於大括號{}裏面的內容會被解釋成代碼塊,所以如果返回的是對象,需要在外面加上一個括號。
下面看幾個例子:
var f = () => 5; // 沒有函數參數
// 等同於
var f = function(){
return 5;
};
var sum = (num1, num2) => num1 + num2; // 多個函數參數
// 等同於
var sum = function(num1, num2){
return num1 + num2;
}
var sum = (num1, num2) => { // 函數體內有多行代碼
num1 = num1 + 1;
return num1 + num2;
}
使用箭頭函數,可以讓我們的回調函數特別的簡潔,看下面的例子:
var myArr = [1, 2, 3];
// 正常函數寫法
var newArr = myArr.map(function(x){
return x + x;
});
// 箭頭函數寫法
var newArr = myArr.map(x => x + x);
this
箭頭函數不止能夠讓代碼更加簡潔,它最大的作用是能夠改變箭頭函數內部的this指向。箭頭函數內部的this是詞法作用域,由上下文確定。看下面的例子:
window.birth = 2001;
var obj1 = {
birth: 1996,
getAge: function () {
var b = this.birth; // 1996
var fn = function () {
return new Date().getFullYear() - this.birth; // this指向window或undefined
};
return fn();
}
};
var obj2 = {
birth: 1996,
getAge: function () {
var b = this.birth; // 1996
var fn = () => new Date().getFullYear() - this.birth; // this指向obj2對象
return fn();
}
};
console.log(obj1.getAge()); // 19
console.log(obj2.getAge()); // 24
由此可見箭頭函數內部的this總是指向詞法作用域,也就是外層調用者obj2。我們可以這麼理解箭頭函數內部this的指向:箭頭函數上面一行的位置this指向誰,箭頭函數內部的this就會指向誰。