《你不知道的Javascript--上卷 学习总结》（作用域）

作用域是什么？

编译原理

1、分词/词法分析

将字符组成的字符串分解成有意义的代码块，称为词法单元。

2、解析/语法分析

将词法单元流转换成一个由元素逐级嵌套所组成的抽象语法树（AST）。

3、代码生成

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

理解作用域

作用域是一套规则，用于确定在何处以及如何查找变量（标识符）。如何查找的目的是对变量进行赋值，那么就是使用LHS查询。如果目的是获取变量的值，就会使用RHS查询。

=操作符及调用函数时传入参数的操作都会导致赋值操作，也就会导致LHS查询

Javascript引擎首先会在代码执行前对其进行编译，在这个过程中，像var a = 2这样的声明会被分解成两个独立的步骤

• 首先，var a 在其作用域中声明新变量。这会在最开始的阶段，也就是代码执行前执行。
• 接下来，a = 2会查询（LHS）查询变量a并对其进行赋值。

LHS和RHS查询都会在当前执行作用域中开始，如果没有找到查询的标识符，就会向上级作用域继续查找目标标识符，最终抵达全局作用域，无论找到还是没找到都将暂停。（这就形成了一条作用域链）

不成功的RHS引用会导致ReferenceError异常.不成功的LHS引用会导致自动隐式地创建一个全局变量（非严格模式下）,该变量使用LHS引用的目标作为标识符，或者抛出ReferenceError异常（严格模式下）

词法作用域

作用域查找会在找到第一个匹配的标识符时停止

全局变量会自动成为全局对象（比如浏览器中的window对象）的属性，因此可以不直接通过全局对象的词法名称，而是间接地通过对全局对象属性的引用来对其进行访问。window.a通过这种技术可以访问那些被同名变量所遮蔽的全局变量。但非全局的变量如果被遮蔽了，无论如何都无法被访问到。

无论函数在哪里被调用，也无论它如何被调用，它的词法作用域都只由函数被声明时所处的位置(这里就会涉及到this的问题了)

欺骗词法

如果想修改词法作用域，js中有两种机制来实现这个目的，但是并不推荐。

• eval/new Function()

  eval() 函数可以接受一个字符串参数，并将其中的内容视为好像在书写时就存在于程序中的这个位置的代码。下面代码就实现了使用eval来达到欺骗的目的，来遮蔽外部变量。（注意严格模式下会报 b is not defined）

  new Function() 函数的行为也很类似，最后一个参数可以接受代码字符串，并将其转化为动态生成的函数（前面的参数是这个新生成的函数的形参）。

    function foo(str,a){
        eval(str)//欺骗！
        console.log(a,b);
    }
    var b = 2;
    foo("var b = 3;",1)//1,3
复制代码

    var sum = new Function('a', 'b', 'return a + b');

    console.log(sum(2, 6));
    // expected output: 8

复制代码

• with

  with通常被当作重复引用同一个对象中的多个属性的快捷方式，可以不需要重复引用对象本身。例如:

    var obj = {
        a:1,
        b:2,
        c:3
    }
    obj.a=2;
    obj.b=3;
    obj.c=4;
    //简单的快捷方式
    with(obj){
        a=3;
        b=4;
        c=5;
    }
复制代码

但实际上这不仅仅是为了方便地访问对象属性。考虑如下代码：

    function foo(obj){
        with(obj){
            a = 2;
        }
    }
    
    var o1 = {
        a:3
    }
    var o2 = {
        b:3
    }
    
    foo(o1)
    console.log(o1.a) //2
    
    foo(o2); // o2没有a属性，因此不会创建这个属性。
    console.log(o2.a) // undefined
    console.log(a) //2   已经放在了全局上了
复制代码

上述当我们传递o1给with时，with所声明的作用域是o1，而这个作用域中含有一个同o1.a属性相符的标识符。但当我们将o2作为作用域时，其中并没有a标识符，因此进行了正常的LHS标识符查询o2的作用域，因此当a=2执行时，自动创建了一个全局变量。

函数作用域和块作用域

函数中的作用域

函数作用域的含义是指，属于这个函数的全部变量都可以在整个函数的范围内使用及复用（事实上在嵌套的作用域中也可以使用）

全局命名空间

变量冲突的一个典型例子存在于全局作用域中。通常很多库在全局作用域中声明一个名字足够独特的变量，通常是一个对象。这个对象被用作库的命名空间，所有需要暴露给外界的功能都会成为这个对象的属性，而不是将自己的标识符暴露在顶级词法作用域中。

块作用域

• with可以创建一个块作用域，其创建的作用域仅在with声明中而非外部作用域中有效。
• try/catch的catch分句会创建一个块作用域，其中声明的变量仅在catch内部有效。
• let。 let关键字可以将变量绑定到所在的任意作用域中（通常是{...}内部）。换句话说，let为其声明的变量隐式地创建在所在的块作用域 （注意：使用let进行的声明不会在块作用域中进行提升。声明的代码被运行之前，声明并不‘存在’。使用let为变量显示声明块作用域可以及时通知引擎来进行垃圾回收，并对变量进行本地绑定是非常有用的工具。并且这个变量不是定义在window上的）

    {
        console.log(bar); // ReferenceError! 暂时性死区
        let bar = 1;
    }
复制代码

• const。 const也可以创建块作用域，但是其创建值之后是固定的，不可以进行更改。

提升

使用var声明的变量和函数在内的所有声明都会在任何代码被执行前首先被处理。会跑到当前作用域的最上面。这就是变量提升。

函数声明会被提升，但是函数表达式却不会被提升。即使是具名的函数表达式，名称标识符在赋值之前也无法在所在作用域中使用。

    foo(); // TypeError
    bar() //  ReferenceError
    
    var foo = function bar() {
        
    }
复制代码

同名的函数和变量提升，函数的优先级更高，并且多个同名的函数，后者会覆盖前者。

作用域闭包

当函数能够记住并访问其所在的词法作用域,就产生了闭包，即使函数是在当前词法作用域之外执行。

循环和闭包

    for(var i = 1;i<=5;i++){
        setTimeout(function(){
            console.log(i) // 输出5个6
        },i*1000)
    }
    
    // 解决方案1: 闭包
    for(var i = 1;i<=5;i++){
        (function(j){
           setTimeout(function(){
                console.log(j) 
            },j*1000) 
        })(i)
    }
    // 解决方案2: 块级作用域
    for(let i = 1;i<=5;i++){
        setTimeout(function(){
            console.log(i) 
        },i*1000)
    }
复制代码