脚本宝典收集整理的这篇文章主要介绍了JavaScript箭头函数：如何，为什么，何时（何时不）使用它们，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。现代JavaScript中最引人注目的功能之一是使用新令牌引入箭头函数，有时称为“胖箭头”函数
=>。
这些功能有两个主要优点 - 非常简洁的语法和更直观的范围和this绑定。
这些好处有时导致箭头功能比其他形式的功能声明更受欢迎。
例如，受欢迎的airbnb eslint配置会在您创建匿名函数时强制使用JavaScript箭头函数。
然而，就像工程中的任何东西一样，箭头函数带有正面和负面。他们的使用存在权衡。
学习这些权衡是很好地使用箭头函数的关键。
在本文中，我们将首先回顾箭头函数的工作原理，然后深入研究箭头函数改进代码的示例，最后深入研究箭头函数不是一个好主意的示例。
(argument1, argument2, ... argumentN) => {
// function body
}=>），后跟函数体。
这与传统函数非常相似，我们只是省略function关键字并在参数后添加一个胖箭头。
然而，有许多方法可以“加油”，使箭头功能显着简化为简单的功能。
首先，如果函数体是单个表达式，则可以不使用括号并将其置于内联中。表达式的结果将由函数返回。例如：
const add = (a, b) => a + b;const getFirst = array => array[0];(name, description) => {name: name, description: description};(name, description) => ({name: name, description: description});this和arguments被继承从其父功能。
例如，使用和不使用箭头函数比较以下代码：
const test = {
name: 'test object',
createAnonFunction: function() {
return function() {
console.LOG(this.name);
console.log(arguments);
};
},
createArrowFunction: function() {
return () => {
console.log(this.name);
console.log(arguments);
};
}
};> const anon = test.createAnonFunction('hello', 'world');
> const arrow = test.createArrowFunction('hello', 'world');
> anon();
undefined
{}
> arrow();
test object
{ '0': 'hello', '1': 'world' }this.name，测试对象没有可用的引用，也没有创建它时调用的参数。
另一方面，箭头函数具有与创建它的函数完全相同的函数上下文，使其可以访问argumetns和测试对象。
const words = ['hello', 'WORLD', 'Whatever'];
const downcasedWords = words.map(word => word.toLowerCase());const names = objects.map(object => object.name);for使用现代迭代器样式循环替换旧式循环时foreach，箭头函数this与父级保持一致的事实使它们非常直观。
this.examples.forEach(example => {
this.runExample(example);
});this.DOSomethingAsync().then((result) => {
this.StoreResult(result);
});mapState。
这涉及定义一组“映射器”，它们将从原始的完整状态对象转换为准确地提取所讨论的组件所需的内容。
这些简单的转换是利用箭头功能的理想和美丽的地方。例：
export default {
computed: {
...mapstate({
results: state => state.results,
users: state => state.users,
});
}
}this正是你想要的。
有一段时间使用类属性语法和箭头函数的组合作为创建“自动绑定”方法的方法，例如可以由事件处理程序使用但仍然绑定到类的方法。
这看起来像是这样的：
class Counter {
counter = 0;
handleClick = () => {
this.counter++;
}
}Counter，它仍然可以访问实例的数据。
这种方法的缺点是多方面的，在记录以及这个职位。
虽然使用这种方法确实为您提供了具有绑定功能的符合人体工程学的快捷方式，但该功能以多种不直观的方式运行，如果您尝试将此对象作为原型进行子类化/使用，则会阻止测试和创建问题。
相反，使用常规函数，如果需要，将其绑定到构造函数中的实例：
class Counter {
counter = 0;
handleClick() {
this.counter++;
}
constructor() {
this.handleClick = this.handleClick.bind(this);
}
}{anonymous}()
{anonymous}()
{anonymous}()
{anonymous}()
{anonymous}()this是动态绑定的地方。
如果您在这些位置使用箭头功能，那么动态绑定将不起作用，并且您（或稍后使用您的代码的其他人）可能会对事情未按预期工作的原因感到困惑。
一些关键的例子：
this设置为事件的currentTarget属性。this为已选择的dom元素。this为Vue组件。以上是脚本宝典为你收集整理的JavaScript箭头函数：如何，为什么，何时（何时不）使用它们全部内容，希望文章能够帮你解决JavaScript箭头函数：如何，为什么，何时（何时不）使用它们所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。