JavaScript深入浅出第1课：箭头函数中的this究竟是什么鬼

箭头函数中的this是定义时的上下文环境中的this、不可被bind()、call()、apply()方法显式修改。箭头函数不拥有自己的this，而是继承自外围最近一层非箭头函数的this值。在传统的函数表达式中，this的值是在函数被调用时确定的，这意味着相同的函数在不同对象上调用会有不同的this值。然而，在箭头函数中，this是在函数创建时词法地保存下来的，也就是说，它与函数定义时的上下文绑定，而非执行时。这种特性使得箭头函数在如回调函数和事件处理器等场景中非常有用，因为它们可以避免传统的this陷阱。

一、箭头函数与传统函数的对比

传统函数的this

在JavaScript的传统函数中，this的值是在函数被调用时确定的。这意味着即使是同一个函数，若是在不同的对象上调用，则this的值也会不同。传统函数的this在以下情况下会有不同的值：

• 当函数作为对象的方法被调用时，this指向该对象；
• 当函数作为普通函数被调用时，this在非严格模式下指向全局对象，在严格模式下是undefined；
• 当函数作为构造函数被调用时，this指向新创建的对象；

箭头函数的this

箭头函数最大的特点是绑定词法作用域的this值。这意味着箭头函数中的this其实是在它被创建时，围绕它的代码块（即外层函数或者全局环境）的this值。箭头函数的这一行为，解决了传统函数中this容易出现的混乱和不确定性。无论箭头函数怎样被后续调用，它的this都指向定义时的上下文环境的this值，而不是执行时的。

二、箭头函数的this不可改变性

箭头函数的this是不可改变的，这意味着一旦定义了箭头函数，其this值在整个生命周期中是固定的。在箭头函数中尝试使用bind()、call()或apply()方法来显式设定this是无效的。相比之下，传统的函数允许使用这三个方法来改变函数体内部this的值。

不可使用bind、call、apply改变this

由于箭头函数的this是在定义时固定下来的，尝试通过bind()、call()或apply()来显式改变它的this是不会生效的。这一特性让箭头函数成为创建稳定this行为的回调函数和闭包的理想选择，特别是在高阶函数和事件处理中。

箭头函数作为方法和构造函数的局限

正因为箭头函数的this是不可变的，它们不适合作为方法使用，尤其是在对象字面量的定义中。同样，箭头函数也不能作为构造函数使用，即不可以用new操作符来实例化。这些限制使得箭头函数的使用需要更加细心地考虑其上下文环境。

三、箭头函数的适用场景

解决回调函数中的this问题

在处理异步代码或回调函数时，箭头函数可以很方便地解决this作用域的问题。在传统的回调函数中，经常需要额外变量（如self或that）来保存外部环境中的this值，以便在回调函数内部使用。使用箭头函数，由于this是自动绑定到定义时上下文的this，这样的问题就不复存在了。

事件处理器

在事件处理中，箭头函数被广泛用于确保this指向正确的上下文对象。例如，在React组件中，箭头函数经常用于确保事件处理器中的this正确指向组件实例。

四、在实际代码中使用箭头函数

使用箭头函数处理数组方法

数组的一些原型方法，如map()、filter()、reduce()等，可以更简洁清晰地使用箭头函数。由于在这些方法的回调函数中，this通常不是最关键的部分，因此可以借助箭头函数省略掉对this的管理。

与高阶函数配合

高阶函数是指那些接受函数作为参数，或者将函数作为输出返回的函数。在这类函数中使用箭头函数，可以使得代码更加简洁，特别是在函数式编程范式中，箭头函数因为其简洁和this的稳定性而被广泛使用。

五、箭头函数的注意点与陷阱

尽管箭头函数提供了很多优势，但它们也带来了一些需要注意的地方。一方面，开发者需要理解箭头函数的this行为，以避免在不恰当的地方使用它们。另一方面，箭头函数由于缺少自己的this、arguments、super或new.target绑定，因此不能用在所有的场合。

不能用作构造函数

由于箭头函数没有自己的this绑定，尝试使用new关键字调用箭头函数会导致错误。箭头函数不应该作为构造函数，也不应被用来定义原型方法。

不能使用arguments对象

在箭头函数内部，arguments对象是不可用的。如果需要访问参数列表，可以使用剩余参数语法 ...args 来代替。

小心对象字面量

如果箭头函数直接返回一个对象字面量，需要用括号将对象字面量包裹起来。否则，大括号会被错误地视为代码块的起始符号，而非对象字面量。

六、总结

箭头函数是现代JavaScript中不可或缺的特性，提供了简洁的语法和确定的this行为。正确理解和利用箭头函数中的this对于写出高效、简洁、可维护的JavaScript代码至关重要。在使用时，我们应当注意箭头函数的适用场景并避免其局限性和陷阱。通过掌握箭头函数的特性，你将能够编写出更加精简和强大的代码。

相关问答FAQs：

1. 箭头函数中的this是怎么定义的？
箭头函数中的this是根据词法作用域来确定的，它会继承上一层作用域中的this值。换句话说，箭头函数中的this始终指向它在定义时所处的作用域的this值。

2. 箭头函数中的this和普通函数中的this有何区别？
在普通函数中，this的指向是在函数被调用时确定的，它是根据调用时的上下文来决定的。而在箭头函数中，this的指向是在函数定义时确定的，它是根据箭头函数所在的词法作用域来决定的。这就意味着，箭头函数中的this不会被调用方式改变，总是保持一致。

3. 如何在箭头函数中正确使用this？
由于箭头函数中的this不会随调用方式的改变而改变，所以我们要注意在使用箭头函数时，确保它的定义和调用方式匹配。如果箭头函数中需要使用this，并且希望它指向调用上下文，可以考虑将箭头函数定义在对象的方法中，或者使用bind方法将箭头函数绑定到特定的对象上。这样可以确保箭头函数中的this指向我们期望的对象。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。 版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除。