JavaScript 中的 “this” 绑定规则在箭头函数出现后发生了哪些变化？-js教程-PHP中文网

JavaScript 中的 “this” 绑定规则在箭头函数出现后发生了哪些变化？

夜晨

发布： 2025-10-04 16:57:01

原创

780人浏览过

箭头函数不绑定自身this，而是继承外层作用域的this。1. 普通函数根据调用方式确定this，箭头函数则词法绑定定义时的this；2. 无法通过call、apply或bind改变其this指向；3. 不宜用作需要动态this的对象方法；4. 适合用于回调函数，避免手动绑定this。

javascript 中的 “this” 绑定规则在箭头函数出现后发生了哪些变化？

箭头函数的引入改变了 JavaScript 中 this 的绑定方式，主要体现在它不再遵循传统的 this 绑定规则。箭头函数没有自己的 this，而是从外层作用域继承 this 值，也就是词法绑定（lexical binding）。

1. 箭头函数不绑定自己的 this

普通函数在调用时会根据调用方式确定 this 的值（可能是全局对象、某个对象、undefined 等），而箭头函数不会创建自己的 this 上下文。

这意味着在箭头函数内部使用的 this 实际上是定义时所在上下文中的 this，而不是运行时决定的。

例如：

const obj = {
  name: 'Alice',
  regularFunc: function() {
    console.log(this.name); // 输出: Alice
  },
  arrowFunc: () => {
    console.log(this.name); // 输出: undefined（或全局中的 name，取决于环境）
  }
};
obj.regularFunc(); // 正常访问 obj 的 this
obj.arrowFunc();   // this 指向外层，不是 obj

登录后复制

2. 无法通过 call、apply 或 bind 改变箭头函数的 this

由于箭头函数的 this 是词法决定的，使用 call、apply 或 bind 无法修改其 this 指向。

立即学习“Java免费学习笔记（深入）”；

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

示例：

const person = { name: 'Bob' };
const func = () => console.log(this.name);
func.call(person); // 仍然输出原作用域的 this.name，不会变成 Bob

登录后复制

3. 在对象方法中使用需谨慎

箭头函数不适合作为对象的方法，尤其是当方法需要引用对象自身属性时，因为 this 不指向该对象。

如果确实需要动态的 this，应使用普通函数表达式或方法简写。

4. 更适合用于回调函数

箭头函数的词法 this 特性使其非常适合用在回调中，比如事件处理、定时器、数组方法等场景，避免了之前需要用 self = this 或 .bind(this) 的麻烦。

常见用法：

setTimeout(() => {
  console.log(this); // this 保持外层的 this
}, 100);
<p>[1, 2, 3].map(x => this.scale * x); // this 来自外层上下文

登录后复制

基本上就这些。箭头函数让 this 的行为更可预测，但也限制了灵活性。理解这一点有助于避免在错误的场景误用箭头函数。

以上就是JavaScript 中的 “this” 绑定规则在箭头函数出现后发生了哪些变化？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

JavaScript实现前端单元测试入门_javascript测试 JS代码规范怎么制定_JS JavaScript代码书写规范与最佳实践 JavaScript非标准日期字符串的健壮解析与格式化教程 JavaScript：高效地将列表数据分块并序列化为JSON JavaScript自定义日期字符串解析与格式化教程