JavaScript作用域核心机制：从块级缺失到声明提前的完整解析

JavaScript作用域核心机制概述

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的作用域链机制

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

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

如上述代码所示，存在三个层级的作用域构成的链式结构。当发生作用域链时，变量查找遵循特定顺序，具体针对上述实例：

当执行console.log(xo)时，JavaScript引擎会依据作用域链，从当前执行环境由内向外逐级查找。若内层未找到该变量，则继续向上层作用域查找，直至全局作用域。若全程未找到，则抛出异常。

425762-20160707114743577-37359182.png

作用域链的创建时机：定义而非调用

四、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();】时，查找到的xo值为“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函数作用域，因此执行时会依据这条特定的作用域链进行变量查找。

声明提前机制与变量提升原理

五、声明提前（Hoisting）

在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作用域(经典)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！