1、基本语法回顾
我们先来回顾下箭头函数的基本语法。
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;
};由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。
// 报错
let getTempItem = id => { id: id, name: "Temp" };
// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });下面是一种特殊情况，虽然可以运行，但会得到错误的结果。
let foo = () => { a: 1 };
foo() // undefined上面代码中，原始意图是返回一个对象{ a: 1 }，但是由于引擎认为大括号是代码块，所以执行了一行语句a: 1。这时，a可以被解释为语句的标签，因此实际执行的语句是1;，然后函数就结束了，没有返回值。
关于作用域
箭头函数内定义的变量及其作用域
// 常规写法
var greeting = () => {let now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
greeting(); //"Good day."
console.log(now); // ReferenceError: now is not defined 标准的let作用域
// 参数括号内定义的变量是局部变量（默认参数）
var greeting = (now=new Date()) => "Good" + (now.getHours() > 17 ? " evening." : " day.");
greeting(); //"Good day."
console.log(now); // ReferenceError: now is not defined
// 对比：函数体内{}不使用var定义的变量是全局变量
var greeting = () => {now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
greeting(); //"Good day."
console.log(now); // Fri Dec 22 2017 10:01:00 GMT+0800 (中国标准时间)
// 对比：函数体内{} 用var定义的变量是局部变量
var greeting = () => {var now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
greeting(); //"Good day."
console.log(now); // ReferenceError: now is not defined2、关于this
2.1、默认绑定外层this
箭头函数没有 this，所以需要通过查找作用域链来确定 this 的值。
这就意味着如果箭头函数被非箭头函数包含，this 绑定的就是最近一层非箭头函数的 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，绑定定义时所在的作用域，而不是指向运行时所在的作用域。
所以，箭头函数转成 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);
}2.2、 不能用call()、apply()、bind()方法修改里面的this
(function() {
return [
(() => this.x).bind({ x: 'inner' })() // 无效的bind,最终this还是指向外层
];
}).call({ x: 'outer' });
// ['outer']上面代码中，箭头函数没有自己的this，所以bind方法无效，内部的this指向外部的this。
3、没有 arguments
箭头函数没有自己的 arguments 对象，这不一定是件坏事，因为箭头函数可以访问外围函数的 arguments 对象：
function constant() {
return () => arguments[0]
}
var result = constant(1);
console.log(result()); // 1那如果我们就是要访问箭头函数的参数呢？
你可以通过命名参数或者 rest 参数的形式访问参数:
let nums = (...nums) => nums;4、 不能通过 new 关键字调用
JavaScript 函数有两个内部方法：[[Call]] 和 [[Construct]]。
当通过new调用函数时，执行[Construct]]方法，创建一个实例对象，然后再执行函数体，将 this 绑定到实例上。
当直接调用的时候，执行[[Call]]方法，直接执行函数体。
箭头函数并没有[[Construct]]方法，不能被用作构造函数，如果通过 new 的方式调用，会报错。
var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor5、没有原型
由于不能使用new调用箭头函数，所以也没有构建原型的需求，于是箭头函数也不存在prototype这个属性。
var Foo = () => {};
console.log(Foo.prototype); // undefined5、不适用场合
第一个场合是定义函数的方法，且该方法内部包括this。
const cat = {
lives: 9,
jumps: () => {
this.lives--;
}
}上面代码中，cat.jumps()方法是一个箭头函数，这是错误的。调用cat.jumps()时，如果是普通函数，该方法内部的this指向cat；如果写成上面那样的箭头函数，使得this指向全局对象，因此不会得到预期结果。
第二个场合是需要动态this的时候，也不应使用箭头函数。
var button = document.getElementById('press');
button.addEventListener('click', () => {
this.classList.toggle('on');
});上面代码运行时，点击按钮会报错，因为button的监听函数是一个箭头函数，导致里面的this就是全局对象。如果改成普通函数，this就会动态指向被点击的按钮对象。
6、使用场景
下面这个是我们开发经常遇到的。我们一般会通过this赋值给一个变量，然后再通过变量访问。
class Test {
constructor() {
this.birth = 10;
}
submit(){
let self = this;
$.ajax({
type: "POST",
dataType: "json",
url: "xxxxx" ,//url
data: "xxxxx",
success: function (result) {
console.log(self.birth);//10
},
error : function() {}
});
}
}
let test = new Test();
test.submit();//undefined 这里我们就可以通过箭头函数来解决
...
success: (result)=> {
console.log(this.birth);//10
},
...箭头函数在react中的运用场景
class Foo extends Component {
constructor(props) {
super(props);
}
handleClick() {
console.log('Click happened', this);
this.setState({a: 1});
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}
}在react中我们这样直接调用方法是有问题的，在handleClick函数中的this是有问题，我们平时需要这么做
class Foo extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Click happened', this);
this.setState({a: 1});
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}
}这里通过this.handleClick.bind(this)给函数绑定this。但是这样写起来有些麻烦，有没有简单的方法呢？这时候我们的箭头函数就出场了
class Foo extends Component {
// Note: this syntax is experimental and not standardized yet.
handleClick = () => {
console.log('Click happened', this);
this.setState({a: 1});
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}
}箭头函数中 this 的值是继承自 外围作用域,很好的解决了这个问题。
除此之外我们还可以用箭头函数传参(这个不是必须的)，而且会有性能问题。更多信息请查看
const A = 65 // ASCII character code
class Alphabet extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
justClicked: null,
letters: Array.from({length: 26}, (_, i) => String.fromCharCode(A + i)).
};
}
handleClick(letter) {
this.setState({ justClicked: letter });
}
render() {
return (
<div>
Just clicked: {this.state.justClicked}
<ul>
{this.state.letters.map(letter =>
<li key={letter} onClick={() => this.handleClick(letter)}>
{letter}
</li>
)}
</ul>
</div>
)
}
}最后
更多系列文章请看
如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎
star对作者也是一种鼓励。
