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就会指向谁。