JavaScript 箭頭函數

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就會指向誰。