我不知道的js（一）作用域与闭包

作用域与闭包

作用域

什么是作用域
作用域就是一套规则，它负责解决（1）将变量存在哪儿？（2）如何找到变量？的问题
作用域工作的前提
- 谁赋予了作用域的权利？——js引擎
- 传统编译语言编译的过程
  - 分词/词法分析：字符串 =》词法单元
```
var a=2; => var a = 2 ;(共5个单元)
```
  - 解析/语法分析：词法单元流 =》抽象语法树（Abstract syntax tree，AST)
  - 代码的生成： AST =》可执行代码（机器指令)
- js引擎编译的特点：
  - 代码在执行前进行编译（需要用到JIT(just in time）进行延迟编译甚至实施重编译来保证性能最佳）
  - 针对 ** var a = 2; **例子的编译流程
    - 分词/词法分析：将var a=2; => var a = 2 ; 分成5个词法单元
    - 解析/语法分析：解析成抽象语法树
    - 代码生成：** 重点来了 **
      - var a (声明操作）=》此时编译器会询问作用域是否有叫 a 的变量存在？忽略该声明，继续编译：在当前作用域下声明一个新变量，命名为a
      - a=2 （赋值操作) =》此时编译器会询问作用域是否有叫 a 的变量存在？使用该变量：引擎根据作用域链继续向上查找该变量。
        是否能找到叫 a 的变量？直接赋值：引擎抛出异常。
    - 引擎在查找变量a是否被声明的过程中，是如何进行的查找？
      - 作用域的协助
      - 查找的目的是赋值=》LHS(left hand side)查询 ：(1) 当变量出现在赋值操作的左侧时，使用 LHS 查询。类似赋值 a=2; (2)若在顶层作用域内没有找到，严格模式下：Reference异常；非严格模式下：自动隐式创建全局变量
      - 查找的目的是取值=》RHS(right hand side)查询 ：(1) 当变量出现在赋值操作的右侧时，使用 RHS 查询。类似取值 a; (2) 若在顶层作用域内没有找到，直接抛出Reference异常
作用域是如何工作的？词法作用域，动态作用域。
- 词法作用域
  - 什么是词法作用域
    - 词法作用域就是定义在词法分析阶段的作用域。词法作用域就是在写代码时将变量和块作用域写在哪里决定的。一般是不会变的。
  - 词法作用域的查找规则（作用域链）
    - 作用域查找从运行时所处的最内部的作用域开始，逐级向上或向外查找，直到遇见第一个匹配的标识符（变量、函数）为止。
  - 改变词法作用域（二般情况出现：欺骗词法）
    - 2种方法
      - eval();接受一个字符串为参数，即动态插入程序代码，伪装成词法期就存在的代码。
```
function foo(str, a){
    eval(str);
    console.log(a, b);
}
var b=2;
foo('var b=3;',1); //1,3
```
      - with；通常被当做重复引用同一个对象的多个属性的快捷方式，可以不需要重复引用对象本身。
```
var obj = {
    a:1,
    b:2,
    c:3
};
//使用with
with(obj){
    a=3;
    b=4;
    c=5;
}
```
    - 后果
      - 引擎无法在编译时对作用域对的查找进行优化
      - 在严格模式下，with被完全禁止，eval(...)也被禁止
常见的作用域单元
- 函数作用域
  - 什么是函数作用域
    - 属于这个函数的全部变量都可以在整个函数的范围内使用及复用
  - 函数的好处：隐藏内部实现，规避同名标志符之间的冲突（有以下两个方法）
    - 声明全局命名空间（一个对象，用来存储全局作用域种的变量）
  - 函数相关常识
    - 函数声明 vs 函数表达式
```
function是声明中的第一个词 ？ 函数声明 ： 函数表达式。
```
    - 具名 vs 匿名 :
```
有无名字的区别
函数表达式可以没有名字，但是函数声明必须有名字
鼓励所有的函数都有名字
```
    - 立即执行函数表达式
```
两种写法： 
(function(){}());
(function(){})();//常用，第一个括号（ ）将函数变成表达式，第二个（ ）执行这个函数
```
- 块作用域（es5之前并没有该概念）
  - 什么是块作用域
```
变量的声明离使用的地方越近越好，并最大程度的本地化。
```
  - 块作用域的例子
    - with关键字： with从对象中创建出的作用域仅在with声明中而非外部作用域有效
    - try/catch ： catch分句创建作用域，且声明的变量只能在catch中使用
    - let ： let为其声明的变量提供块作用域{...},且let进行的声明在块中不会变量提升
    - const ： const声明常量。

提升

声明提升

变量声明提升
函数声明提升
函数表达式声明不会被提升

foo();//Uncaught TypeError: foo is not a function//foo()对于undefined值进行函数调用而导致非法操作
var foo= function bar(){
    console.log('1');
};
foo();//1
foo;//function bar(){}
bar;//ReferenceError: bar is not defined
bar();//ReferenceError: bar is not defined

提升的优先级
- 函数优先，其次才是变量
- 避免在块内声明函数

练习题（1）找出所有的 LHS 查询和 RHS 查询

function foo(a) {
    var b=a;
     return a+b;
}
var c= foo(2);

答案：
LHS（3处) c=..., a=2(隐式变量分配），b=...,
RHS（4处) foo(2..., =a, a.., ..b

作用域闭包(晦涩难懂，常常搞错的地方)

什么是闭包？

函数可以记住并访问所在的词法作用域时，就产生了闭包。即使是在当前词法作用域之外的地方执行。

闭包     = 那些能够访问自由变量的函数 = 函数 + 函数能访问的自由变量
自由变量  = 在函数中使用，但既不是函数参数也不是函数的局部变量

闭包作用
- 可以读取函数内部的变量
- 让这些变量的值始终保持在内存中。

闭包例子

回调函数（定时器，ajax跨域，异步等）
for循环

for(var i=1;i<=5;i++){
    setTimeout( function timer(){
        console.log(i);
    },i*1000);
}  //以每秒一次的频率输出5个6

for(var i=1;i<=5;i++){
    (function(j){
        setTimeout( function timer(){
            console.log(j);
        },j*1000);
    })(i);
} //立即执行函数为每一次迭代生成一个新的作用域，以每秒一次依次输出1-5

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

动态作用域

什么是动态作用域
动态作用域是在函数运行时确定的，类似this。
词法作用域关注在何处声明，动态作用域关注在何处调用。