在JavaScript中，如何正确理解和应用this关键字的绑定规则？

this的值由函数调用方式决定，遵循四种绑定规则：默认绑定中独立调用时this指向全局对象或undefined；隐式绑定中作为对象方法调用时this指向该对象；显式绑定通过call、apply或bind强制指定this；new绑定中构造函数的this指向新创建的实例。规则优先级为new绑定 > 显式绑定 > 隐式绑定 > 默认绑定，箭头函数则继承外层作用域的this。

理解 JavaScript 中的 this 关键字，关键在于掌握它的绑定规则。this 的值不是在函数定义时决定的，而是在函数运行时根据调用上下文动态确定的。主要有四种绑定规则：默认绑定、隐式绑定、显式绑定和 new 绑定。

1. 默认绑定（Default Binding）

当函数被直接调用，没有上下文对象时，this 指向全局对象（在浏览器中是 window，在严格模式下为 undefined）。

例如：

function foo() {
  console.log(this);
}
foo(); // 非严格模式下输出 window，严格模式下输出 undefined

2. 隐式绑定（Implicit Binding）

调用位置是否有上下文对象，是判断隐式绑定的关键。

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

例如：

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

注意：如果将方法赋值给变量再调用，会丢失绑定：

const fn = obj.greet;
fn(); // 输出 undefined（非严格模式下可能是 window.name）

3. 显式绑定（Explicit Binding）

这些方法允许你明确地告诉函数 this 应该是什么。

码哩写作

最懂作者的AI辅助创作工具

91

查看详情

• call 和 apply：立即执行函数，并指定 this 值
• bind：返回一个新函数，其 this 被永久绑定到指定对象

例如：

function introduce() {
  console.log(`I am ${this.name}`);
}
const person = { name: 'Bob' };
introduce.call(person); // 输出 'I am Bob'

4. new 绑定（New Binding）

new 操作的执行过程包括创建空对象、绑定 this、执行构造函数代码、返回实例。

例如：

function Person(name) {
  this.name = name; // this 指向 new 创建的对象
}
const p = new Person('Charlie');
console.log(p.name); // 输出 'Charlie'

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

另外，箭头函数没有自己的 this，它会继承外层作用域的 this 值，因此不适用上述规则。这在处理回调函数或事件处理器时特别有用。

基本上就这些。掌握 this 的关键是看函数是如何被调用的，而不是如何定义的。多练习不同调用方式下的 this 表现，就能形成准确的直觉。

以上就是在JavaScript中，如何正确理解和应用this关键字的绑定规则？的详细内容，更多请关注php中文网其它相关文章！