深入探讨 this 指向的幕后原理

前端

2023-11-16 12:18:16

this 指向的谜团

在 JavaScript 的世界里，this 一直是一个备受争议的话题。它的指向行为看似随心所欲，但实际上却遵循着严谨的规则。为了揭开 this 指向的谜团，我们必须从三个关键概念入手：执行上下文、作用域链和原型链。

执行上下文

执行上下文是 JavaScript 中一个至关重要的概念，它定义了代码执行的环境。每个执行上下文中都包含两个关键属性：

变量环境： 存储变量和函数声明。
作用域链： 用于查找变量和函数。

执行上下文是由 JavaScript 引擎在代码执行时创建的。每个函数调用都会创建一个新的执行上下文，并将其推入执行上下文栈中。当函数执行完毕后，其执行上下文就会从栈中弹出。

作用域链

作用域链是一个有序的执行上下文列表，用于查找变量和函数。当 JavaScript 引擎搜索一个标识符时，它会从当前执行上下文的变量环境开始搜索。如果找不到，它就会逐级向上搜索作用域链，直到找到为止。

作用域链的形成方式如下：

全局执行上下文位于作用域链的顶部。
函数执行上下文的作用域链包含自身变量环境和外层函数执行上下文的作用域链。

原型链

原型链是 JavaScript 中一个独特的机制，它允许对象继承其他对象的属性和方法。每个对象都拥有一个原型对象，原型对象又拥有自己的原型对象，依此类推。

当 JavaScript 引擎搜索一个对象属性时，它会从当前对象开始搜索。如果找不到，它就会沿着原型链向上搜索，直到找到为止。

this 指向的规则

现在，我们已经了解了执行上下文、作用域链和原型链，就可以揭示 this 指向的规则了。

默认情况下，this 指向调用函数的对象。 例如，当我们调用一个方法时，this 指向该方法所属的对象。
如果函数不是作为对象的方法被调用的，this 指向全局对象。 例如，当我们直接调用一个函数时，this 指向 window 对象（在浏览器中）或 global 对象（在 Node.js 中）。
this 指向可以通过 call()、apply() 和 bind() 方法显式绑定。 这允许我们将 this 指向任意对象。

实际示例

以下是一些实际示例，演示了 this 指向的规则：

// 示例 1：默认情况下，this 指向调用函数的对象
const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

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

// 示例 2：如果函数不是作为对象的方法被调用的，this 指向全局对象
function greet() {
  console.log(`Hello, my name is ${this.name}.`);
}

greet(); // 输出：Hello, my name is undefined.

// 示例 3：通过 call() 方法显式绑定 this 指向
const person = {
  name: 'John'
};

function greet() {
  console.log(`Hello, my name is ${this.name}.`);
}

greet.call(person); // 输出：Hello, my name is John.