深入解读作用域、作用链与 `this` 的运作机制

前端

2023-11-28 00:43:11

作用域、作用链和 this：JavaScript 开发人员的指南

在 JavaScript 的王国中，作用域、作用链和 this 关键词犹如三座灯塔，指引着开发者在代码的迷宫中航行。深入理解这些概念对于构建健壮且易于维护的应用程序至关重要。

作用域：变量的领地

作用域决定了变量的可见性和生命周期。JavaScript 拥有两种主要的作用域：

全局作用域： 全局可见的变量。在任何地方都可以访问它们。
局部作用域： 仅限于特定代码块（如函数或块级作用域）内部的变量。一旦离开该代码块，它们就消失了。

想象一下变量就像不同领土上的居民。全局作用域是整个国家，而局部作用域是其中的一个个省份。每个省份都有自己的居民，但他们只能在自己的省份内活动。

作用链：寻找变量的踪迹

当 JavaScript 需要查找一个变量时，它会沿着作用链进行搜索。作用链是一条路径，它了变量可以被找到的不同作用域。JavaScript 引擎会从当前作用域开始向上搜索，逐级查找，直到找到变量或到达全局作用域。

就好比侦探在调查一个案件时，他们会沿着线索逐层深入，直到找到嫌疑人。

`this`：上下文之王

this 关键词指向当前函数执行时的上下文对象。它的值取决于函数的调用方式。

在普通函数中： this 指向全局对象（通常是 window）。
在方法中： this 指向包含该方法的对象。
在箭头函数中： this 从包含箭头函数的函数的作用域中继承。

想象 this 是舞台上的聚光灯。它聚焦在当前活动的对象上，无论它是全局对象、包含方法的对象还是函数自身。

变量提升：JavaScript 的隐形魔术

在 JavaScript 中，变量提升是一个有趣且有时会引起混淆的现象。所有变量声明都会在执行代码之前被提升到作用域的顶部。这意味着即使变量在声明之前已被使用，您也可以使用它们。

不过，要注意，虽然变量声明被提升，但它们的值不会被提升。因此，使用未初始化的变量可能会导致 undefined 值。

实战演练

为了加深理解，让我们看一个代码示例：

function outerScope() {
  var outerVar = "Outer Variable";

  function innerScope() {
    var innerVar = "Inner Variable";

    console.log(innerVar); // "Inner Variable"
    console.log(outerVar); // "Outer Variable"

    // 作用链查找 `this`
    console.log(this); // outerScope() 对象
  }

  // 作用链查找 `this`
  console.log(this); // outerScope() 对象

  innerScope();
}

// 作用链查找 `this`
console.log(this); // 全局对象

在这个示例中：

outerVar 是在 outerScope() 函数的全局作用域中声明的，它在整个函数中都可以访问。
innerVar 是在 innerScope() 函数的局部作用域中声明的，它只在该函数内有效。
this 在 outerScope() 函数中指向 outerScope() 对象，因为该函数是作为普通函数调用的。
this 在 innerScope() 函数中指向 outerScope() 对象，因为 innerScope() 函数是在 outerScope() 函数中声明的。
this 在全局作用域中指向全局对象，因为没有包裹函数。