在ES6的所有新特性中，箭头函数(Arrow Fucntion)算是我用的最频繁的特性之一了。
它是函数
那什么是箭头函数呢？首先，它得有“函数”的功能。我们平时定义一个函数，大致是这种样子的：
function greeting(name) {
return "Hello," + name;
}
我们可以使用箭头函数来定义一个与它大致等价的函数：
const greeting = (name) => {
return "Hello," + name;
}
更进一步，这个箭头函数还可以简化，在箭头后面只使用一个表达式：
const greeting = (name) => "Hello," + name;
我们还可以在使用匿名函数的场景使用箭头函数，比如：
[1, 2, 3].map((item) => item * item);
//结果：[1, 4, 9]
它没有自己的this绑定
我们来看一个我们经常会遇到的问题：
var person = {
_name: "Kevin",
intro: function () {
console.log(this._name); // Kevin
var getMyIntro = function () {
console.log(this._name); // undefined
return "My name is " + this._name;
};
return getMyIntro();
}
};
person.intro(); //My name is undefined
在这段代码中，我们期望的结果是：My name is Kevin，但是它的结果却是：My name is undefined。在一个对象的成员函数中的内嵌函数，它的this对象并不是指向成员函数所指向的this对象（也就是这个例子中的person对象），而是指向当前执行上下文的顶层对象（在浏览器中运行的话，就是Window对象）。
在ES6之前，我们怎么来解决这个问题呢？我们可以像如下代码一样，在成员函数中定义一个变量，把成员函数的this缓存下来，然后在内嵌函数中使用成员函数中的这个变量，这样就达到成员函数和内嵌函数中拿到的数据都是一样的：
var person = {
_name: "Kevin",
intro: function () {
var that = this; //缓存this
console.log(that._name); // Kevin
var getMyIntro = function () {
console.log(that._name); // Kevin
return "My name is " + that._name;
};
return getMyIntro();
}
};
person.intro(); //My name is Kevin
在ES6中，我们也可以通过箭头函数来轻松解决这个问题：
var person = {
_name: "Kevin",
intro: function () {
console.log(this._name); // Kevin
var getMyIntro = () => {
console.log(this._name); // Kevin
return "My name is " + this._name;
};
return getMyIntro();
}
};
person.intro(); //My name is Kevin
可以看到，我们将内嵌函数getMyIntro定义成了一个箭头函数，这样的话，箭头函数中的this是和当前上下文中的this是一致的了。
