JavaScript中的this关键字

在 JavaScript 中，关键字 this 表示当前执行的环境或对象。 它通常用于获取正在调用当前函数的对象，但是它的值可能会在不同的情况下发生变化。 对于许多初学者和甚至有经验的 JavaScript 开发人员来说，this 关键字是一个常见的疑惑。

this的基本用法

默认情况下，this 关键字引用全局对象。 当在函数中使用 this 时，此时 this 的值将是调用函数的对象。

function logThis() {
  console.log(this);
}
logThis(); // 输出 window 或 global（取决于环境）

在上述示例中，当调用 logThis() 时，它将返回全局对象 window 或 global （取决于环境），因为此时没有指定调用它的对象。

将this绑定到特定对象

可以使用 call、apply 或 bind 函数将 this 绑定到特定的对象。

let person = {
  name: "Alice",
  describe() {
    console.log(`I am ${this.name}.`);
  }
};

let person2 = {
  name: "Bob"
};

person.describe(); // 输出 "I am Alice."
person.describe.call(person2); // 输出 "I am Bob."

在上述示例中，person 对象有一个 describe() 方法，它引用了 this.name。 当 person.describe() 调用时，this 将指向 person。 但是，通过 call 方法将 this 绑定到 person2，在 person.describe.call(person2) 调用时，this 将引用 person2。

将this绑定到函数

还可以使用 bind() 函数将 this 绑定到函数本身。

var obj = { num: 2 };

var addToThis = function(a) {
  return this.num + a;
};

var bound = addToThis.bind(obj);

console.log(bound(1)); // 输出 3

在上述示例中，addToThis() 函数返回 this.num 加上参数 a 的值。 使用 bind() 函数将 addToThis() 函数绑定到 obj 对象上，使 this.num 为 2。 调用 bound(1) 将返回 3。

将this绑定到类方法

如果您想在类方法中使用 this，则可以将该方法的 this 绑定到类实例本身。

class MyClass {
  constructor(value) {
    this.value = value;
  }

  logValue() {
    console.log(this.value);
  }
}

let myInstance = new MyClass("Hello!");
let logInstanceValue = myInstance.logValue.bind(myInstance);
logInstanceValue(); // 输出 "Hello!"

在上述示例中，MyClass 类有一个 logValue() 方法，在该方法中引用了 this.value。 创建类实例 myInstance 后，创建 logInstanceValue 变量，并使用 bind() 函数将 this 绑定到 myInstance 实例。 调用 logInstanceValue() 将输出 myInstance 的 value 属性。

疑惑和常见错误

• 当在 JavaScript 中使用 this 时，请确保理解它所引用的对象，它是如何定义的以及它是在哪个上下文中使用的。
• 在字符“严格模式”中未指定对象时，this 将被设置为 undefined，这可能会导致错误。
• 如果在函数中使用 this，则该函数不应该具有箭头函数。

结论

this 是 JavaScript 中的一个关键字，它表示当前执行上下文或对象。 默认情况下，this 引用全局对象。 可以使用 call()、apply() 或 bind() 函数将 this 绑定到特定的对象。 若要将 this 绑定到函数本身，则可以使用 bind() 函数。 若要将 this 绑定到类实例，则可以使用 bind() 函数将该方法的 this 绑定到类实例本身。