JavaScript语法函数高级之作用域与作用域链

一、作用域

1、理解作用域
1) 就是一块”地盘”, 一个代码段所在的区域
2) 它是静态的(相对于上下文对象), 在编写代码时就确定了

2、作用域定义：

广义上来说：
作用域是负责收集并维护由所有声明的标识符（变量）组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限
狭义上来说：
作用域是程序代码中定义的一个区域,其控制着变量与参数的可见性及生命周期
总结：
作用域与变量的读取跟存储有着密不可分的联系。
作用域本质是一套规则，用来规范变量的查询。

3、作用域的作用： 隔离变量，不同作用域下同名变量不会有冲突
4、作用域分类：全局作用域、函数作用域和块级作用域({}，ES6新增)

5、作用域如何确定：静态编译（代码编写时）时已经确定。
6、如何确定作用域的个数？

• n+1
• n:函数的定义次数；
• 1：全局作用域

7、window挂载
在全局作用域下声明的变量和函数自动挂载在window。

          var a = 1;
           console.log(window.a);

window的作用：BOM挂载对象 ECMAS顶层对象

<!--    
    作用域：
               定义：作用域本质是一套规则，用来规范变量的查询。
              作用域分类：
                                          全局作用域
                                          函数作用域
                     范围如何确定？
                                          静态编译（代码编写时）时已经确定。  
                     如何确定作用域的个数？
                n+1
                    n:函数的定义次数；
                    1：全局作用域
                    作用域变量查询
                               左查询：出现在等号左边的查询；
                                         在整条作用域链中没有找到变量的声明，引擎会在全局作用域中自动声明。
                                右查询：出现在等号非左边的查询；
                                         在整条作用域链中没有找到变量的声明就会报错。
                               注意：形参查询属于右查询，封闭在自己的作用域内部。function(b)~=function(var b)

        -->
    <script type="text/javascript">
        function wrap() {
            var c = "局部";
            console.log(b);
            console.log(c);
        }

        function wrap1(d) {
            console.log(d);
//          console.log(c);
        }

        var a = 1,
            b = "全局";
        wrap();
        wrap1(2);
        console.log(a);
        //在全局作用域下声明的变量和函数自动挂载在window。
        /* window的作用：BOM挂载对象  ECMAS顶层对象*/
        console.log(window.a);
//      console.log(c);
    </script>

二、作用域链

1、理解作用域链
1)多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)。
2) 查找变量时就是沿着作用域链来查找的。

总结： 多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)

<!--    
    作用域链：
                      多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)
          变量查找规则：
        1. 在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入上一级
        2. 在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入上一级
        3. 直到全局作用域, 如果还找不到就抛出找不到的异常

                                -->
    <script type="text/javascript">
        var a = 1;

        (function wrap() {
            var b = 2;
//          console.log(a)

            function inner() {
                var c = 3;

                function inner_1() {
                    var d = 4;

                    function inner_2() {
                        var e = 5;

                        function inner_3() {
                            var f = 6;
                            console.log(f);
                            console.log(e);
                            console.log(d);
                            console.log(c);
                            console.log(b);
                            console.log(a);
//                          console.log(g);
                        }
                        return inner_3();
                    }
                    return inner_2();
                }
                return inner_1();
            }
            return inner();
        })()

    </script>

三、作用域变量查询

1、左右查询
左查询：出现在等号左边的查询；
在整条作用域链中没有找到变量的声明，引擎会在全局作用域中自动声明。
右查询：出现在等号非左边的查询；
在整条作用域链中没有找到变量的声明就会报错。
注意：形参查询属于右查询，封闭在自己的作用域内部。

  function(b)相当于function(var b)

2、左查询&右查询的区别
如果整条作用域都没有找到对应变量的申明；
左查询 ：在全局作用域自动申明一份。
右查询 ：报错 。

3、 变量查找规则：
1)在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入上一级
2) 在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入上一级
3) 直到全局作用域, 如果还找不到就抛出找不到的异常

四、使用细节和注意事项

1、变量声明的注意点
var a=b=2;相当于 var a=2;b=2;

<script type="text/javascript">
        var a=1,b=1;
        var c=d=2;//var c=2;d=2;
        var e,f=3;
        g=5;
        function wrap(){
            var c=d=4;// d的作用域提升为全局作用域
        }
        wrap();
        console.log(a);//1
        console.log(b);//1
        console.log(c);//2
        console.log(d);//4
        console.log(e);//underfined
        console.log(f);//3
        console.log(g);//5
    </script>

2、形参查询属于右查询，封闭在自己的作用域内部。

  function(b)相当于function(var b)