this全面解析：绑定规则与箭头函数差异_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

this全面解析：绑定规则与箭头函数差异

2025-11-19

浏览次数：次

返回列表

this的指向在J*aScript中由调用方式决定，普通函数具动态this，依赖调用上下文，遵循默认、隐式、显式、new绑定规则，优先级依次递增；箭头函数无独立this，词法继承外层作用域的this，不可通过call、apply、bind修改，也不能作为构造函数使用；两者在对象方法、事件回调等场景下表现不同，需根据需求选择。

this全面解析：绑定规则与箭头函数差异

在 J*aScript 中，this 的指向问题一直是开发者容易混淆的核心概念之一。理解 this 的绑定规则以及它在普通函数与箭头函数中的差异，是掌握 JS 函数执行机制的关键。

一、this 的绑定规则

J*aScript 中的 this 并不是在函数定义时决定的，而是在函数调用时动态绑定的。具体指向取决于函数的调用方式，主要有以下四种绑定规则：

默认绑定：在非严格模式下，独立函数调用时，this 指向全局对象（浏览器中为 window）。严格模式下为 undefined。
隐式绑定：当函数作为对象的方法被调用时，this 指向该对象。例如 obj.method() 中，this 指向 obj。
显式绑定：通过 call、apply 或 bind 方法手动指定 this 指向。这些方法可以强制函数内的 this 指向传入的第一个参数。
new 绑定：使用 new 调用构造函数时，会创建一个新对象，this 指向这个新生成的实例。

这四种规则有优先级：new 绑定 > 显式绑定 > 隐式绑定 > 默认绑定。

二、普通函数中的 this

普通函数的 this 完全依赖于调用上下文。同一个函数，在不同调用方式下，this 指向可能完全不同。

例如：

const obj = {
  name: 'Alice',
  greet: function() {
    console.log(this.name);
  }
};
obj.greet(); // 输出 Alice，this 指向 obj

const fn = obj.greet;
fn(); // 输出 undefined，this 指向全局或 undefined（严格模式）

这里可以看出，函数的执行环境决定了 this 的值，而不是定义位置。

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado AI

三、箭头函数中的 this

箭头函数没有自己的 this，它的 this 是从外层作用域“继承”而来，即词法绑定。也就是说，箭头函数内部的 this 值等于其所在上下文中的 this。

例如：

const obj = {
  name: 'Bob',
  greet: () => {
    console.log(this.name);
  },
  delayGreet: function() {
    setTimeout(() => {
      console.log(this.name); // 正确输出 Bob
    }, 100);
  }
};

obj.greet(); // 输出 undefined（因为外层 this 是 window）
obj.delayGreet(); // 输出 Bob，箭头函数捕获了 delayGreet 的 this

箭头函数不能通过 call、apply 或 bind 改变 this 指向，也不能用作构造函数（会报错）。