前言

在编程的世界里，JavaScript以其灵活多变的特性，成为众多开发者手中的利剑。然而，要真正驾驭这门语言，理解其核心概念——作用域，是每位勇士必经的修炼之路。这篇文章将引领我们穿梭于JavaScript的幽深森林，拨开层层迷雾，揭示作用域这一神秘领域的奥秘。

编译原理

分词/词法分析

这个过程会将由字符组成的字符串分解成有意义的代码块，代码块即词法单元。

例如：var a = 2在这个过程中会被分解成var, a, =, 2,。（空格是否会被分解成代码块取决与它在代码中的具体意义）

解析/语法分析

这个过程是将词法单元数组转换成代表程序语法结构的树，这个树被称为“抽象语法树”。

例如：var a = 2的抽象语法树中有个VariableDeclaration（声明变量）为顶级节点，它有Identifier（变量为a）和AssignmentExpreeion（赋值）作为子节点，其中AssignmentExpreeion还有一个叫作Numericliteral（值为2）的子节点。

代码生成

将AST转换为可执行代码的过程称为代码生成。

例如：将var a = 2的AST转化为机器指令，用来创建a变量（同时分配内存），并将2的值储存在a中。

作用域

全局作用域

全局作用域是在程序的最外层定义的变量，它可以在代码的任何地方被访问。在浏览器环境中，全局变量属于window对象（在Node.js环境中则是global对象）。创建全局变量通常不推荐，因为它们可能会导致命名冲突和数据污染全局环境。

   var a =2;
   function foo() {
     console.log(a); // 输出: 2
   }
   foo();
   console.log(a); // 输出: 2

函数作用域

函数作用域是指在函数内部定义的变量。这些变量只能在该函数内部访问，对函数外部是不可见的。这样的设计有助于封装和避免变量污染全局作用域。

    function foo() {
        var a = 2;
        console.log(a); // 输出: 2
    }
    foo();
    console.log(a); // 错误：a is not defined

块级作用域（ES6引入）

在ES6之前，JavaScript没有原生的块级作用域，但随着let和const关键字的引入，现在可以在if语句、for循环等块结构中创建具有块级作用域的变量。这意味着这样的变量只在定义它们的块内有效。

    if (true) {
        let a = "2;
        console.log(a); // 输出: 2
    }
    console.log(a); // 错误：a is not defined

类似地，使用const声明的变量也具有块级作用域，且其值不能被重新赋值。

4.欺骗词法作用域

eval() 让原本不属于这里的代码，变得好像天生就定义在这里一样

    function foo(a,str){
        eval(str);//var b=2
        console.log(a,b);//输出1，2
    }

    foo(1,'var b=2')

with(){} 当修改对象中不存在的属性时，这个属性会被泄漏到全局，变成全局变量

function foo(obj){
    with(obj){
        a=2  
    }
}

var o1={
    b:1
}
foo(o1);
console.log(o2);
console.log(a);//输出2

o1对象中没有变量a，但因为调用函数foo(obj)，函数中的with将a = 2泄漏到了全局，使得在全局中也能输出a的值。

var、let、const的区别

声明提升 :
- var: 变量声明会被提升到所在作用域的顶部，但初始化不会。这可能导致在声明之前访问变量时返回undefined而不是报错。
- let和const: 它们没有变量提升的特性。这意味着在声明之前访问这些变量会导致引用错误（ReferenceError）。
作用域:
- var: 具有函数作用域，这意味着在函数内部声明的变量对整个函数可见，但在函数外部不可见。在全局作用域下声明的var变量会成为window对象（浏览器环境）或global对象（Node.js环境）的属性。
- let和const: 引入了块级作用域，这意味着这些变量只在声明它们的代码块（如if语句、for循环或一对大括号内）内有效。这有助于减少作用域污染并提高了代码的可读性和健壮性。
重复声明:
- var: 允许在同一作用域内多次声明相同的变量，后面的声明会覆盖前面的声明。
- let和const: 在同一个作用域或块内，不允许重新声明已经存在的变量名。尝试这样做会引发语法错误。
常量与变量:
- const: 用于声明一个常量，一旦赋值就不能更改。需要注意的是，如果是基本类型（如数字、字符串），值确实不可变；但对于复合类型（如数组或对象），虽然引用本身不可变，但其内容是可以修改的。
- var和let: 声明的是变量，意味着可以在声明后改变它们的值。

总结

本文深度剖析了JavaScript中的作用域机制，从编译原理的分词、语法分析到代码生成，逐步展开JavaScript代码执行的幕后过程。重点阐述了全局作用域、函数作用域以及ES6新增的块级作用域特性，通过实例说明各作用域的使用与区别，强调了封装与避免污染全局环境的重要性。进一步探讨了var、let、const声明的关键字差异，包括声明提升、作用域限制、重复声明规则及常量定义，帮助开发者更好地掌握变量管理。文章还警惕性地介绍了eval()与with()函数对作用域的特殊影响，警醒开发者避免潜在的陷阱与副作用。总而言之，本文是深入理解JavaScript作用域精髓，提升编码实践质量的宝贵指南。

深入浅出JS作用域：函数、块级与全局作用域的那些事儿

前言

编译原理

作用域

var、let、const的区别

总结