详解JavaScript作用域和作用域链

前言

JavaScript 作用域基础

JavaScript 拥有一项关键特性，即作用域（Scope）。尽管这一概念对许多初学者而言颇具挑战，但本文将通过通俗易懂的方式，为您厘清作用域与作用域链的核心逻辑，助您掌握这一基础且重要的知识点。

1. 什么是作用域

作用域定义了代码中变量、函数和对象的可访问范围。简而言之，它决定了代码块内资源（如变量）的可见性。为了更直观地理解，我们可以参考以下示例：

function outFun2() {
  var inVariable = "内层变量2";
}
outFun2();//要先执行这个函数，否则根本不知道里面是啥
console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined

通过上述示例可以看出，变量 inVariable 若未在全局作用域中声明，直接在全局调用便会报错。我们可以将作用域视为一个独立的封闭空间，其核心作用在于隔离变量，防止变量意外泄露。这意味着，在不同作用域下，即使变量名相同，也不会产生冲突。

在 ES6 标准推出之前，JavaScript 仅具备全局作用域和函数作用域。ES6 引入了块级作用域的概念，主要通过 let 和 const 两个关键字来实现。

全局与函数作用域

2. 全局作用域和函数作用域

全局作用域指的是在代码任何位置均可访问的对象。通常，以下几种情况会形成全局作用域：

位于最外层的函数及其内部定义的变量拥有全局作用域。

var outVariable = "我是最外层变量"; //最外层变量
function outFun() { //最外层函数
  var inVariable = "内层变量";
  function innerFun() { //内层函数
    console.log(inVariable);
  }
  innerFun();
}
console.log(outVariable); //我是最外层变量
outFun(); //内层变量
console.log(inVariable); //inVariable is not defined
innerFun(); //innerFun is not defined

未使用 var、let 或 const 直接赋值的变量，会自动成为全局作用域下的变量。

function outFun2() {
  variable = "未定义直接赋值的变量";
  var inVariable2 = "内层变量2";
}
outFun2();//要先执行这个函数，否则根本不知道里面是啥
console.log(variable); //未定义直接赋值的变量
console.log(inVariable2); //inVariable2 is not defined

所有 window 对象的属性均属于全局作用域。

通常情况下，window 对象的内置属性（如 window.name、window.location、window.top 等）都具备全局作用域。

全局作用域存在一个显著缺点：如果编写了大量未包含在函数中的 JS 代码，这些变量都将暴露在命名空间中，从而污染全局命名空间并引发命名冲突。

// 张三写的代码中
var data = {a: 100}

// 李四写的代码中
var data = {x: true}

这也是为什么 jQuery、Zepto 等主流库的源码通常会将代码包裹在 (function(){....})() 中。这种写法确保了内部变量不会泄露到外部，避免污染全局环境，从而不影响其他库或脚本的执行。这正是函数作用域隔离特性的体现。

函数作用域指的是在函数内部声明的变量。与全局作用域不同，局部作用域通常仅在特定的代码片段（如函数内部）内可访问。

function doSomething(){
  var blogName="浪里行舟";
  function innerSay(){
    alert(blogName);
  }
  innerSay();
}
alert(blogName); //脚本错误
innerSay(); //脚本错误

作用域是分层结构的，内层作用域可以访问外层作用域的变量，但反向则不行。为了便于理解，我们可以用“泡泡”来比喻作用域：

最终输出结果为 2, 4, 12。

1. 泡泡 1 代表全局作用域，包含标识符 foo；
2. 泡泡 2 代表 foo 函数的作用域，包含标识符 a、bar 和 b；
3. 泡泡 3 代表 bar 函数的作用域，仅包含标识符 c。

需要特别注意：块语句（即大括号 {} 包裹的代码，如 if、switch 条件语句或 for、while 循环语句）并不会像函数那样创建新的作用域。在块语句中定义的变量，将保留在其原本存在的作用域中。

if (true) {
  // 'if' 条件语句块不会创建一个新的作用域
  var name = 'Hammad'; // name 依然在全局作用域中
}
console.log(name); // logs 'Hammad'

JS 初学者往往需要时间适应变量提升这一特性。若不理解此行为，极易导致 Bug。正因如此，ES6 引入了块级作用域，使变量的生命周期更加可控。

ES6 块级作用域

3. 块级作用域

块级作用域可通过 let 和 const 声明，所声明的变量在指定块的作用域外不可访问。块级作用域通常在以下情况创建：

1. 在函数内部。
2. 在代码块（由一对花括号包裹）内部。

let 声明的语法与 var 一致。你可以用 let 替代 var 进行变量声明，但变量的作用域将被限制在当前代码块内。块级作用域具有以下特点：

1. 声明的变量不会提升到代码块顶部。

let 和 const 声明不会被提升到当前代码块的顶部。因此，建议手动将 let/const 声明置于代码块顶部，以确保变量在整个块内可用。

function getValue(condition) {
if (condition) {
let value = "blue";
return value;
} else {
// value 在此处不可用
return null;
}
// value 在此处不可用
}

1. 禁止重复声明。

如果标识符已在代码块内定义，再次使用 let 声明同名标识符将抛出错误。例如：

var count = 30;
let count = 40; // Uncaught SyntaxError: Identifier 'count' has already been declared

在本例中，count 变量被声明了两次：一次使用 var，另一次使用 let。由于 let 不允许在同一作用域内重复声明已有标识符，此处会抛出错误。但若在嵌套的作用域内使用 let 声明同名新变量，则不会报错。

var count = 30;
// 不会抛出错误
if (condition) {
let count = 40;
// 其他代码
}

1. 循环中绑定块级作用域的应用。

开发者最期待 for 循环具备块级作用域，以便将计数器变量限制在循环内部。例如，以下代码在 JS 开发中十分常见：

<button>测试1</button>
<button>测试2</button>
<button>测试3</button>
<script type="text/javascript">
  var btns = document.getElementsByTagName('button')
  for (var i = 0; i < btns.length; i++) {
   btns[i].onclick = function () {
    console.log('第' + (i + 1) + '个')
   }
  }
</script>

假设我们需要实现点击按钮提示“点击的是第 n 个按钮”的功能（暂不考虑事件代理）。令人意外的是，点击任意按钮弹出的都是“第四个”。这是因为 i 是全局变量，当执行点击事件时，i 的值已变为 3。最简单的修改方法是使用 let 声明 i。

for (let i = 0; i < btns.length; i++) {
  btns[i].onclick = function () {
   console.log('第' + (i + 1) + '个')
  }
 }

作用域链与自由变量

作用域链

1. 什么是自由变量

首先了解“自由变量”的概念。如下代码中，console.log(a) 需要获取 a 变量，但当前作用域并未定义 a（可对比 b）。在当前作用域中未定义的变量，被称为自由变量。自由变量的值如何获取？——需向父级作用域寻找（注：此说法并不严谨，下文将重点解释）。

var a = 100
function fn() {
  var b = 200
  console.log(a) // 这里的a在这里就是一个自由变量
  console.log(b)
}
fn()

2. 什么是作用域链

如果父级作用域也没有该变量呢？则继续向上层寻找，直到全局作用域仍未找到，便宣告失败。这种层层递进的关系，即称为作用域链。

var a = 100
function F1() {
  var b = 200
  function F2() {
    var c = 300
    console.log(a) // 自由变量，顺作用域链向父作用域找
    console.log(b) // 自由变量，顺作用域链向父作用域找
    console.log(c) // 本作用域的变量
  }
  F2()
}
F1()

3. 关于自由变量的取值

前文提到自由变量需从父作用域取值，但这种解释有时会产生歧义。

var x = 10
function fn() {
 console.log(x)
}
function show(f) {
 var x = 20
 (function() {
  f() //10，而不是20
 })()
}
show(fn)

在 fn 函数中，获取自由变量 x 的值时，应前往哪个作用域查找？——应前往创建 fn 函数的那个作用域中查找，无论 fn 函数最终在哪里被调用。

因此，建议不再使用上述说法。更准确的描述是：应前往“创建这个函数的那个域”中查找。

在作用域中取值，强调的是“创建”而非“调用”，这一点至关重要——这也就是所谓的“静态作用域”。

var a = 10
function fn() {
 var b = 20
 function bar() {
  console.log(a + b) //30
 }
 return bar
}
var x = fn(),
 b = 200
x() //bar()

fn() 返回 bar 函数并赋值给 x。执行 x() 即执行 bar 函数代码。获取 b 的值时，直接在 fn 作用域中取出。获取 a 的值时，试图在 fn 作用域查找但未果，于是转向创建 fn 的作用域中查找，最终找到，因此结果为 30。

作用域与执行上下文的区别

作用域与执行上下文

许多开发人员常混淆作用域和执行上下文的概念，误以为二者相同，但事实并非如此。

JavaScript 属于解释型语言，其执行分为解释和执行两个阶段，这两个阶段所做的事情并不相同：

解释阶段：

1. 词法分析。
2. 语法分析。
3. 确定作用域规则。

执行阶段：

1. 创建执行上下文。
2. 执行函数代码。
3. 垃圾回收。

JavaScript 在解释阶段便会确定作用域规则，因此作用域在函数定义时已确定，而非调用时确定。但执行上下文是在函数执行前创建的。执行上下文最明显的特征是 this 的指向由运行时确定，而作用域访问的变量则由代码编写结构决定。

作用域和执行上下文之间最大的区别在于： 执行上下文在运行时确定，可能随时改变；作用域在定义时确定，且不会改变。

一个作用域下可能包含若干个上下文环境。可能从未有过上下文环境（函数未被调用）；可能曾经存在，但在函数调用结束后被销毁；也可能同时存在一个或多个（如闭包）。同一作用域下，不同的调用会产生不同的执行上下文，进而产生不同的变量值。

以上是对 JavaScript 作用域和作用域链的详解整合，希望对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！