深入理解JavaScript作用域：从基础概念到闭包原理

JavaScript运行上下文与作用域概念

JavaScript代码的每一行都在特定的运行上下文（execution context）中执行。可以将这些上下文视为代码运行的环境，它们为每一行代码提供了来源信息以及可访问的变量范围。JavaScript有一套严格的访问规则，运行上下文就像是有门禁管理的社区，内部有着明确的访问权限限制。

这种环境边界通常被称为作用域，其核心机制是上下文的作用域链（scope chain）。在特定的作用域内，代码只能访问该作用域链中定义的变量。相比于外部作用域的变量，代码优先访问本地（局部）变量。

作用域是指变量和函数的可访问范围，它决定了变量的可见性和生命周期。JavaScript的作用域机制是前端开发中的难点，掌握以下核心要点即可清晰理解其工作原理。

块级作用域与函数作用域的区别

一、JavaScript中不存在块级作用域

在Java或C#等语言中，大括号{}内部存在块级作用域，即代码块本身就是一个独立的作用域。

public static void main ()
{ if(1==1){
 String name = "seven";
 }
 System.out.println(name);
}// 报错

public static void Main()
{ if(1==1){
 string name = "seven";
 }
 Console.WriteLine(name);
}// 报错

JavaScript语言中不存在块级作用域，这是其与强类型静态语言的重要区别之一。

function Main(){
 if(1==1){
 var name = 'seven';
 }
 console.log(name);
}// 输出： seven

二、JavaScript采用函数作用域

在JavaScript中，每个函数定义一个独立的作用域。外部作用域无法直接访问内部函数作用域中定义的变量。

function Main(){
 var innerValue = 'seven';
}
 
Main();
 
console.log(innerValue);
 
// 报错：Uncaught ReferenceError: innerValue is not defined

作用域链的构成与变量查找机制

三、JavaScript的作用域链

由于JavaScript中每个函数都拥有独立的作用域，当出现函数嵌套函数的情况时，就会形成作用域链。

xo = 'alex';
 
function Func(){
 var xo = "seven";
 function inner(){
 var xo = 'alvin';
 console.log(xo);
 }
 inner();
}
Func();

如上述代码所示，存在三个作用域组成的作用域链。当涉及变量查找时，会遵循特定的顺序进行。

当执行console.log(xo)时，其变量查找顺序遵循根据作用域链从内到外的优先级规则。如果当前内层作用域中未找到该变量，则会逐步向外层作用域查找，直到找到变量或抛出异常为止。

作用域链的创建时机与闭包示例

四、JavaScript的作用域链在执行前已创建

JavaScript的作用域链在函数被执行之前就已经创建完成。后续执行时，只需按照既定的作用域链进行变量查找即可。

示例一：

xo = 'alex';
 
function Func(){
 var xo = "seven";
 function inner(){
 
 console.log(xo);
 }
 return inner;
}
 
var ret = Func();
ret();
// 输出结果： seven

上述代码在函数被调用之前，作用域链已经存在：

全局作用域 -> Func函数作用域 -> inner函数作用域 当执行【ret();】时，由于ret指向inner函数，该函数的作用域链在执行前已被定义为：全局作用域 -> Func函数作用域 -> inner函数作用域。因此，执行【ret();】时，会根据已存在的作用域链去寻找变量。

示例二：

xo = 'alex';
 
function Func(){
 var xo = "eirc";
 function inner(){
 
 console.log(xo);
 }
 xo = 'seven';
 return inner;
}
 
var ret = Func();
ret();
// 输出结果： seven

上述代码与示例一目的相同，旨在强调函数被调用之前作用域链已经存在：

全局作用域 -> Func函数作用域 -> inner函数作用域 不同之处在于，在执行【var ret = Func();】时，Func作用域中的xo变量值已由“eric”被重置为“seven”。因此，后续执行【ret();】时，只能找到值为“seven”的变量。

示例三：

xo = 'alex';
function Bar(){
 console.log(xo);
}
 
function Func(){
 var xo = "seven";
 
 return Bar;
}
 
var ret = Func();
ret();
// 输出结果： alex

上述代码在函数被执行之前，已经创建了两条独立的作用域链：

全局作用域 -> Bar函数作用域 全局作用域 -> Func函数作用域 当执行【ret();】时，ret指向Bar函数，而Bar函数的作用域链已经存在：全局作用域 -> Bar函数作用域。因此，执行时会根据该已存在的作用域链进行变量查找。

声明提前机制与变量初始化

五、声明提前

在JavaScript中，如果不创建变量而直接使用，则会报错：

console.log(xxoo);
// 报错：Uncaught ReferenceError: xxoo is not defined

JavaScript中如果创建变量但不赋值，则该变量的值为undefined，例如：

var xxoo;
console.log(xxoo);
// 输出：undefined
在函数内如果这么写：
function Foo(){
 console.log(xo);
 var xo = 'seven';
}
 
Foo();
// 输出：undefined

上述代码不报错而是输出undefined，其原因是：JavaScript函数在被执行之前，会将其中的变量全部声明，但不进行赋值。因此，相当于在“预编译”阶段执行了var xo；语句，所以输出结果为undefined。

JavaScript是一门有趣的语言，其许多特性针对HTML DOM操作设计，因此显得随意且缺乏严谨性。但随着前端生态的繁荣和Node.js的兴起，JavaScript已不再是“玩具语言”或jQuery时代的“CSS扩展”。本文提到的概念无论对新手还是从传统Web开发转型的开发者来说，都容易混淆或误解，希望本文能有所帮助。