JavaScript 中，决定 this 绑定的优先级是怎样的？

2023-09-23 05:28:08

this 绑定：JavaScript 中的优先级解析

在 JavaScript 中，this 扮演着至关重要的角色，决定了函数执行时所引用的对象。理解 this 绑定的优先级至关重要，因为它决定了在多个潜在候选对象中，哪个对象最终成为 this 的归属。掌握这些优先级规则将使你能够编写更加可读且可维护的 JavaScript 代码。

理解 this 绑定的基础：函数调用位置

在深入探讨优先级规则之前，了解 this 绑定的基础至关重要。简而言之，this 的值取决于函数的调用位置。通常情况下，分析调用栈可以帮助确定函数的调用位置，因为真正的调用位置有时可能被编程模式所掩盖。

this 绑定的优先级规则详解

JavaScript 中 this 绑定的优先级遵循以下规则：

隐式绑定： 当函数被作为对象的方法调用时，this 会被绑定到该对象。
显式绑定： 当使用 bind() 方法显式绑定函数时，this 会被绑定到 bind() 方法中指定的特定对象。
new 绑定： 当函数被作为构造函数调用时，this 会被绑定到新创建的对象。
默认绑定： 如果函数不是以上三种方式调用，this 会被绑定到全局对象（在严格模式下为 undefined）。
箭头函数： 箭头函数中的 this 与包含它们的函数相同。

优先级示例

下面的代码示例将演示不同情况下 this 绑定的优先级：

// 隐式绑定
const person = {
  name: "John",
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // 输出: "Hello, my name is John"

// 显式绑定
const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log(this); // 输出: <button>...</button>
}.bind(person));

// new 绑定
function Car(make, model) {
  this.make = make;
  this.model = model;
}

const car = new Car('Toyota', 'Camry');
console.log(car.make); // 输出: "Toyota"

// 默认绑定
function globalFunction() {
  console.log(this); // 在严格模式下输出: undefined
}

globalFunction();

// 箭头函数
const arrowFunction = () => {
  console.log(this); // 输出: Window {...}
};

arrowFunction();

结论

掌握 this 绑定的优先级规则对编写高质量 JavaScript 代码至关重要。通过遵循这些规则，你可以有效地控制函数中 this 的值，避免意外行为和错误。

常见问题解答

什么时候使用隐式绑定？
当函数作为对象的方法调用时，应使用隐式绑定。
如何在显式绑定中指定特定的 ** this 对象？**
通过 bind() 方法，可以在指定的对象上显式绑定函数。
new 绑定与隐式绑定的区别是什么？
隐式绑定将 this 绑定到调用它的对象，而 new 绑定将 this 绑定到新创建的对象。
为什么箭头函数中的 ** this 与包含它们的函数相同？**
箭头函数没有自己的 this 绑定，它们从包含它们的函数中继承 this 。
在严格模式下，默认绑定的 ** this 为什么是 ** undefined**？**
在严格模式下，全局对象（window）不可访问，因此默认绑定的 this 为 undefined 。