一、特点
1、箭头函数为函数表达式,并不存在箭头函数声明
2、箭头函数是匿名函数表达式,没有用于递归或事件绑定/解绑定的命名引用
3、支持普通函数参数所有功能,包括默认值、解构、rest参数等
4、语法清晰简洁
二、设计的主要目的
以特定的方式改变this的行为特性,解决this相关编码的特殊而常见的痛点
注:在箭头函数内部,this绑定不是动态的,而是词法的
如:
var controller = {
makeRequest: function() {
var self = this;
btn.addEventListener('click', function() {
self.makeRequest();
}, false)
}
}
此时this的绑定是动态的,代码中通过self变量依赖于词法作用于的可预测性
var controller = {
makeRequest: function() {
btn.addEventListener('click', () => {
this.makeRequest();
}, false)
}
}
代码中的点头函数回调中的词法this与封装的函数makeRequest()指向同样的值,即=> 是 var self = this; 的词法替代形式
var controller = {
makeRequest: () => {
this.helper();
},
helper: () => {}
}
此时this是从包围作用域中词法继承而来的,指向全局对象
三、适用规则
1、若有一个简短单句在线函数表达式:
1)唯一的语句是return某个计算的值
2)函数内部没有this引用
3)没有自身引用(递归、事件绑定/解绑定)
4)不会要求函数执行3)中的事件
则可以安全的重构为=>箭头函数
2、若有一个内层表达式:
1)依赖于包含它的函数中调用var self = this hack
2)依赖于.bind(this)来确定适当的this绑定
则可以安全的重构为=>箭头函数