JavaScript this：揭示神秘的关联

前端

2023-09-19 14:07:19

JavaScript 中的 this 是一个谜一样且经常被误解的概念。它是一个指向当前函数执行上下文的对象的引用。这意味着它的值根据函数的调用方式而变化。

在 JavaScript 中，函数可以以四种不同的方式调用：

作为方法调用： 当函数作为对象的方法调用时，this 被绑定到该对象。
作为函数调用： 当函数作为普通函数调用时，this 被绑定到全局对象（在严格模式下为 undefined）。
作为构造函数调用： 当函数作为构造函数调用时，this 被绑定到新创建的对象。
作为箭头函数调用： 当函数作为箭头函数调用时，this 保留其父作用域的值。

除了这四种基本调用方式外，还可以通过显式绑定来改变 this 的值。显式绑定允许你将 this 的值绑定到任何对象。这在某些情况下非常有用，例如当你需要在一个对象上调用一个函数，但该函数不是该对象的方法时。

this 的三种绑定规则

在 JavaScript 中，this 的绑定遵循三个基本规则：

默认绑定： 当函数作为普通函数调用时，this 被绑定到全局对象（在严格模式下为 undefined）。
隐式绑定： 当函数作为对象的方法调用时，this 被绑定到该对象。
显式绑定： 当函数通过显式绑定语法（如 call()、apply() 或 bind()）调用时，this 被绑定到指定的对象。

this 的隐式丢失

this 的隐式丢失是指在函数被作为普通函数调用时，this 的值被绑定到全局对象（在严格模式下为 undefined）。这可能会导致意外的结果，尤其是在涉及到对象的方法时。

例如，考虑以下代码：

var person = {
  name: "John",
  greet: function() {
    console.log(this.name);
  }
};

person.greet(); // "John"

// 将 greet() 函数从 person 对象中剥离出来
var greet = person.greet;

// 将 greet() 函数作为普通函数调用
greet(); // undefined

在第一个例子中，greet() 函数作为 person 对象的方法被调用，所以 this 被绑定到 person 对象，因此输出 "John"。但是在第二个例子中，greet() 函数被作为普通函数调用，所以 this 被绑定到全局对象，因此输出 undefined。

this 的显示绑定

为了解决 this 的隐式丢失问题，可以使用显式绑定语法（如 call()、apply() 或 bind()）来将 this 的值绑定到指定的对象。

例如，考虑以下代码：

var person = {
  name: "John",
  greet: function() {
    console.log(this.name);
  }
};

// 将 greet() 函数从 person 对象中剥离出来
var greet = person.greet;

// 使用 call() 方法将 this 绑定到 person 对象
greet.call(person); // "John"

// 使用 apply() 方法将 this 绑定到 person 对象
greet.apply(person); // "John"

// 使用 bind() 方法将 this 绑定到 person 对象
var boundGreet = greet.bind(person);

// 将 boundGreet() 函数作为普通函数调用
boundGreet(); // "John"