JavaScript作用域链机制解析：从执行环境到变量查找全过程

系统性地解析JavaScript中作用域链的核心概念及其实际应用价值。

引言

在前文关于JavaScript对象的讨论中，曾简要提及作用域链。许多开发者对此理解尚浅，然而这一概念在技术面试中高频出现，且在实际开发中至关重要。若忽视作用域链规则，极易引发难以排查的隐蔽Bug，耗费大量调试时间。鉴于其重要性，本文旨在深入剖析作用域链，帮助开发者建立清晰认知，规避潜在风险。

正文

一、执行环境

理解作用域链需先掌握“执行环境”（Execution Context）的概念。每个执行环境都关联一个变量对象（Variable Object），该对象存储了当前环境中声明的变量与函数。需注意，此变量对象仅为逻辑概念，外部代码无法直接访问。

以浏览器环境为例，当在全局作用域执行代码时，当前执行环境即为window对象（全局环境）。此时，与该全局环境关联的变量对象中存储了全局定义的变量，例如变量fruit。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <script>
    let fruit = 'banana'
    alert(fruit)
  </script>
</body>
</html>

在JavaScript中，函数调用会创建新的执行环境。如示例代码所示，函数内部构成了一个局部环境，其关联的变量对象存储了局部变量my_favorite。与此同时，全局环境window仍保留其关联的变量对象，其中存储着变量fruit以及函数fn1。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <script>
    let fruit = 'banana'
    alert(fruit)
    function fn1() {
      let my_favorite = 'apple'
      return my_favorite
    }
    fn1()
  </script>
</body>
</html>

二、作用域链

基于对执行环境的理解，当代码在特定环境中执行时，系统会为该环境创建一个作用域链。作用域链的起始端是当前环境的变量对象；若当前环境为函数，则作用域链的下一环节指向全局window环境的变量对象，以此类推，形成链式结构。

首先来看一下代码部分


<script>
	let fruit = 'banana'
	function fn() {
		let color = 'red'
		//返回 '我最喜欢的水果是banana,我最喜欢的颜色是red'
		console.log('我最喜欢的水果是' + fruit + ',我最喜欢的颜色是' + color)
	}
	fn()
	//报错, color is undefined
	console.log('我最喜欢的水果是' + fruit + ',我最喜欢的颜色是' + color)
</script>

当函数fn被执行时，其内部构建的作用域链结构如下：

在函数fn内部，代码引用了变量fruit和color。查找过程从作用域链头部开始：首先检查当前活动变量对象（即函数fn的变量对象），发现存在变量color，故成功引用；但未找到fruit，于是沿作用域链向下查找至下一环节（全局window的变量对象），在此处找到了fruit并成功引用。一旦找到所需变量，查找过程即终止，不再继续向下遍历。

接着考察全局window环境下的代码执行：console.log('我最喜欢的水果是' + fruit + ',我最喜欢的颜色是' + color)。此时全局环境的作用域链结构如下：

全局代码同样引用了fruit和color。查找从作用域链头部（即window全局变量对象）开始，成功找到fruit。然而，由于color未在全局变量对象中定义，系统沿作用域链向下查找，但已到达链尾，无其他变量对象可供查询。因此，color返回undefined。此例表明，全局环境无权访问函数fn执行环境内的局部变量color，这体现了变量color的作用域仅限于函数fn内部。

综上所述，作用域链确保了执行环境中代码对变量访问的有序性与确定性。

三、块级作用域

在ES6之前的JavaScript中，不存在块级作用域概念。即由花括号{}或小括号()包围的代码块内部并不形成独立的作用域。以下两个示例可佐证：


if(true) {
	var fruit = 'banana'
}
console.log(fruit)  //返回 banana

观察第一个示例，在if语句的花括号内使用var声明了变量fruit。依据作用域链规则，外部理应无法访问该变量，但实际运行结果却返回了banana。

再看第二个示例：


for(var i=0; i<4; i++) {
	alert(i)
}
console.log(i)  //返回4

在for循环的小括号内使用var声明了临时变量i。循环结束后，在外部访问该变量，同样成功返回了相应值4。

上述现象均源于JavaScript早期版本缺乏块级作用域，这常导致变量污染等不必要的麻烦。ES6引入了let和const声明方式，有效解决了这一问题。如需进一步了解，可参考前文关于let和const用法及区别的文章——“还没理解let和const的用法和区别吗，几百字让你立马搞懂”。

四、其他情况

此外，还有一种情况会影响变量的访问顺序：直接对未声明的变量赋值。示例如下：


function fn() {
	sum = 1 + 2
}
fn()

console.log(sum)   //返回 3

根据前文所述作用域链原理，当执行最后一行代码时，处于全局执行环境，若查询不到变量sum，理应报错undefined。但此处实际返回了数值3。

原因在于：使用var声明变量时，变量会被提升至离代码最近的活动变量对象中（如函数fn的变量对象），导致全局环境无法直接访问。然而，若不使用var直接赋值（如本例），解释器会自动将该变量创建并挂载到全局活动变量对象中。这就是全局环境仍能访问变量sum的原因。

五、总结

作用域链可视为将变量对象按顺序连接而成的链条。
每个执行环境拥有独立的作用域链。
引用变量时，系统沿当前执行环境的作用域链，从头部开始依次向下查找，直至链尾；若未找到，则返回undefined。
作用域链的核心作用在于保障变量访问的有序性。

结束语

至此，关于JavaScript作用域链的讲解告一段落。希望读者能深入理解这一概念，从而在开发中消除大部分因作用域混淆引发的不必要Bug。

本文介绍了JavaScript中作用域链的概念及用途。更多相关内容，欢迎搜索本站历史文章或继续浏览后续系列文章。感谢大家的支持！

JavaScript作用域链详解：执行环境、变量查找与块级作用域

引言

正文

一、执行环境

二、作用域链

三、块级作用域

四、其他情况

五、总结

结束语

实用工具推荐