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

做用域是什么？

编译原理

一、分词/词法分析

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

二、解析/语法分析

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

三、代码生成

将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)
    }
复制代码