ES2015中的箭头函数提供了更简洁的语法
- 我现在可以用箭头函数替换所有函数声明/表达式吗
- 我要注意什么
示例：
构造函数
函数用户（名称）{
this.name=名称；
}
//vs
const User=name=>；{
this.name=名称；
};
原型方法
User.prototype.getName=function（）{
返回此.name；
};
//vs
User.prototype.getName=（）=>；这个名字；
对象（文字）方法
常量对象={
getName:function（）{
// ...
}
};
//vs
常量对象={
getName:（）=>{
// ...
}
};
回调
设置超时（函数（）{
// ...
}, 500);
//vs
设置超时（（）=>{
// ...
}, 500);
可变函数
函数和（）{
让args=[].slice.call（参数）；
// ...
}
//vs
常量和=（…参数）=>；{
// ...
};
tl；博士：不箭头函数和函数声明/表达式不是等价的，不能盲目替换。
如果要替换的函数未使用this，参数，并且未使用new调用，则选择“是”
通常情况下：视情况而定。箭头函数的行为与函数声明/表达式不同，因此让我们先看看它们的区别：
1。词法此和参数
箭头函数没有自己的此或参数绑定。相反，这些标识符像其他变量一样在词法范围内解析。这意味着在arrow函数内部，this和arguments指的是this和arguments的值，在arrow函数定义的环境中（即“在arrow函数外部”）：
//使用函数表达式的示例
函数createObject（）{
log（'createObject`:'内，this.foo）；
返回{
傅:42,，
bar:function（）{
log（'Inside'bar`:'，this.foo）；
},
};
}
createObject.call（{foo:21}）.bar（）；//在createObject中重写'this'//使用箭头函数的示例
函数createObject（）{
log（'createObject`:'内，this.foo）；
返回{
傅:42,，
bar:（）=>；console.log（'bar'：'内，this.foo），
};
}
createObject.call（{foo:21}）.bar（）；//在createObject中重写'this'在函数表达式的情况下，此引用在createObject中创建的对象。在箭头函数的情况下，this指的是createObject本身的this
如果需要访问当前环境的This，则箭头功能非常有用：
//当前常用模式
var=这个；
getData（函数（数据）{
数据=数据；
});
//使用箭头功能的更好选择
getData（数据=>{
这个数据=数据；
});
注意这也意味着无法使用.bind或调用设置箭头函数的this
如果你不太熟悉 < ，请考虑阅读
- 这个
- YDKJS-此&；对象原型
2。无法使用new
ES2015区分了可调用的函数和可构造的函数。如果函数是可构造的，则可以使用new调用它，即newuser（）。如果一个函数是可调用的，则可以调用它而无需new（即正常函数调用）
通过函数声明/表达式创建的函数既可构造也可调用。
箭头函数（和方法）只能调用。
class构造函数只能构造
如果您试图调用一个不可调用的函数或构造一个不可构造的函数，您将得到一个运行时错误
知道这一点，我们可以陈述如下
可替换：
- 不使用
此或参数的函数 - 与
.bind（this）
不可更换：
- 构造函数
- 添加到原型中的函数/方法（因为它们通常使用此）
- 变量函数（如果它们使用
参数（见下文）） - 生成器函数，需要
函数*符号
让我们通过您的示例更仔细地了解这一点：
构造函数函数
这不起作用，因为无法使用new调用箭头函数。继续使用函数声明/表达式或使用class
原型方法
很可能不是，因为原型方法通常使用this来访问实例。如果他们不使用此，则您可以替换它。但是，如果您主要关注简洁的语法，请使用class及其简洁的方法语法：
类用户{
建造师（姓名）{
this.name=名称；
}
getName（）{
返回此.name；
}
}
对象方法
类似地，对象文字中的方法也是如此。如果方法希望通过此引用对象本身，请继续使用函数表达式，或使用新方法语法：
常量对象={
getName（）{
// ...
},
};
回调
视情况而定。如果您正在为外部this或正在使用.bind（this），则一定要替换它：
//旧
setTimeout（函数（）{
// ...
}.绑定（本），500）；
//新的
设置超时（（）=>{
// ...
}, 500);
但是：如果调用回调的代码显式地将this设置为特定值，就像事件处理程序（尤其是jQuery）的情况一样，并且回调使用this（或参数），则不能使用箭头函数
可变函数
由于箭头函数没有自己的参数，因此不能简单地用箭头函数替换它们。但是，ES2015引入了一种替代使用参数的方法：rest参数
//旧
函数和（）{
让args=[].slice.call（参数）；
// ...
}
//新的
常量和=（…参数）=>；{
// ...
};
相关问题：
- 什么时候应该在ECMAScript 6中使用箭头函数
- ES6 arrow函数是否有自己的参数
- ES6 arrow函数和使用Function.prototype.bind绑定的函数之间有什么区别（如果有）
- 如何使用箭头函数（公共类字段）作为类方法
其他资源：
- MDN-箭头函数
- YDKJS-Arrow函数