再谈对 Javascript 作用域的理解

前言：之前我已经就作用域的理解写过一篇笔记，最近又看了《你不知道的JS》这本书；写一下新的分享。为避免有错误的理解，如果有困惑或者发现了我的误读，请不吝指出。

以下面的代码为例：

var a = 5;
var b = a;

传统编译语言的编译流程：

分词/词法分析：
将代码安照对应语言的规则，拆分成关键字；如： var, a , =, 5

解析/语法分析：
根据语法，将关键字组成类似的“抽象语法树” （Abstract Syntax Tree，AST）

{
     VariableDeclaration : {
        Identifier: 'a',
        AssignmentExpression: {
             NumericLiteral: 5
        }
     }
}

3.代码生成
根据 AST 生成对应语言在当前操作系统的机器指令

然后机器指令将会分配部分内存存储变量 a 和它的值。

JS 的编译过程

JS 的编译过程，相对于传统语言的编译相对更复杂。而且它是通常是即时编译即时执行。

上述代码中， JS 编译器将会安照如下流程操作：

声明变量

var a
var b

JS 首先在当前作用域查询是否有变量 a; 如果有，则忽略；否则声明一个新变量，并命名为 a. 同理 b.
这里我终于理解了为什么：使用 var 产生声明提前；重复声明时，会发生值的替换；

对 a 赋值

a = 2

对 a 进行 LHS 查询，即当前作用域是否声明了变量 a；在当前作用域中无法找到某个变量时，引擎就会在外层嵌套的作用域中继续查找，直到找到该变量，或抵达最外层的作用域（也就是全局作用域）为止。
找到其变量容器，并赋予新的值；非严格模式下，当全局作用域也查找不到时，会在全局声明变量 a, 并对其赋值 5.

这里我终于理解了为什么：非严格模式下，局部作用域直接赋值一个为声明变量，会产生一个全局变量；

对 b 赋值

b = a

首先对 a 进行 RHS 查询，对 b 进行LHS 查询；并将 a 的值赋予给 b 的变量容器；

RHS 简单地查找某个变量的值；发生在对这个变量的使用时
LHS 查询则是试图找到变量的容器本身，从而可以对其赋值；发生在对这个变量的赋值时

函数声明和执行时的编译流程

function log(a) {
    console.log(a)
}

log(2)

函数 log 的声明
首先函数声明式声明和 var log = function(){} 的方式有所区别：

函数声明式声明，会将一个 Function 实例的引用直接赋给变量 log；不进行 LHS；而且会提到最前面

var fn = 5;

function fn() {
    console.log('this is fn')
}
console.log(fn) // 5

实际执行顺序如下：

// 先提升； 变量 fn 指向 Function 实例
function fn() {
    console.log('this is fn')
}

// 后提升; 查询到当前作用域已经有 fn 变量, 忽略提升
var fn;

// fn 原本指向 Function 实例； 被后执行的 fn = 5 的赋值操作替换
fn = 5

console.log(fn) // 5

另一个例子

foo(); // 3 
function foo() { 
 console.log( 1 ); 
} 
var foo = function() { 
 console.log( 2 ); 
}; 
function foo() { 
 console.log( 3 ); 
}

实际执行顺序如下：

// 首先， 两个函数式声明被提升； 后者覆盖前者；
function foo() { 
 console.log( 1 ); 
} 

function foo() { 
 console.log( 3 ); 
}

// 接着 var foo 提升， 但通过查询已声明 foo 而忽略
var foo;

// 然后执行 foo() 并输出 3
foo(); // 3 

// 最后 foo 被重新赋值
foo = function() { 
 console.log( 2 ); 
};

而赋值函数的方式则像赋值普通变量一样, 先对查询是否声明变量 log, 再在执行赋值时进行 LHS；

log 的 RHS 查找
对 log 进行 RHS ；查找到它的值指向的 Function 实例
Function 实例的执行
执行 Function 实例时，会对参数 a 进行一个隐式的 LHS；即当前函数作用域内没有声明a 时，声明 a 并赋值为 5；最后执行函数体。

块级作用域

try catch ; ES3 标准

 try{
    undefined() // 某些报错的代码
 } catch (err) {
    console.log(err) // 正常打印
 }
 
 console.log(err) // ReferenceEorror 报错

let const

{
    let a = 'a'
    const b = 'b'
    var c = 'c'
    function fn() {
        console.log('fn')
    }
}
fn() // 'fn'
console.log(c) // 'c'
console.log(b) // ReferenceEorror 报错
console.log(a) // ReferenceEorror 报错

作用域的应用

作用域的几个优点：

将非必要信息隐藏
避免全局的冲突
清除仅执行一次的代码

立即执行函数 IIFE（Immediately Invoked Function Expression）
创建一个 Function 实例，执行后立即清除；

应用一：仅需执行一次的代码片段，不需要产生全局变量

// 设定一个参数 global
// 来区分内部作用域和全局作用域的变量；可以避免同名变量的“遮蔽效应”
var a = 111;
(function(global) {
    var a = 222;
    console.log(a); // 222
    console.log(global.a); // 111
})(window)

应用二：间隔 1 秒，依次打印 1，2，3，4，5

// 此时所有的回调都会在循环结束时触发；
// 因为函数调用的都是全局作用域的 i， 而此时 i 为 6； 不是我们想要的
for (var i=1; i<=5; i++) {
    setTimeout( function timer() { 
        console.log( j ); 
    }, j*1000 ); 
}

// 通过自执行函数创造的局部作用域；
// 此时参数 j 保留了循环器依次产生的 i
for (var i=1; i<=5; i++) { 
 (function(j) { 
     setTimeout( function timer() { 
        console.log( j ); 
     }, j*1000 ); 
 })( i ); 
}

回调函数
回调函数内部的变量，不会被外部访问到
setTimeout(function() {

}, 1000)

let const 创造块级作用域
对于上述，间隔 1 秒依次打印 1，2，3，4，5 的例子；可以简单的使用 let 制造块级作用域来解决

for (let i=1; i<=5; i++) {
    setTimeout( function timer() { 
        console.log( i ); 
    }, i*1000 );  
}