javascript作用域详解

什么是作用域

简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。

我们先了解一下JavaScript的工作原理，引擎，编译器，作用域三者是如何协同工作来完成javascript代码的执行的。

引擎：从头到尾负责整个JavaScript程序的编译及执行过程。

编译器：负责词法分析及代码生成

作用域：负责收集并维护由所有声明的变量组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些变量的访问权限。

我们看下最简单的var index = 10;了解一下引擎、编译器和作用域是如何协同工作的。

    var index;  
    index = 10;  

JS会将其看成是两个声明，第一个是定义声明：编译器在编译阶段执行。第二个是赋值声明：由引擎在运行时执行。
因此可以分解为：

首先遇到var index，”编译器”会询问”作用域”：当前的作用域中是否有index，如果是，那么”编译器”会忽略这个声明，继续进行编译；如果否，那么它会要求“作用域”在当前的作用域声明一个新的变量，并命名为index.

然后，”引擎”处理index = 10时，首先会询问”作用域”：当前的作用域中是否存在一个index的变量，如果是，那么引擎就会使用这个变量，如果否，那么”引擎”会继续查找该变量。如果”引擎”最终找到了index变量，那么就将10赋值给它，否则”引擎”就会抛出 一个异常(作用域链)。

总结一下变量赋值操作过程，即：首先编译器会在当前作用域中声明一个变量（如果之前没有声明过），然后在运行时，引擎会在作用域中查找该变量，如果能够找到就对它赋值，否则就抛出异常。

黄金守则一：

js没有块级作用域（你可以自己闭包或其他方法实现），只有函数级作用域，函数外面的变量函数里面可以找到，函数里面的变量外面找不到。

案例一：

这是为什么呢？？

var a = 10;
        function aaa(){//step-4
            alert(a);//step-5->执行alert，此时只能找到外面的a=10故弹框10
        }
        function bbb(){//step-2
            var a = 20;
            aaa();//step-3
        }
        //定义了函数没啥用，调用才是真格的所以这里是step-1
        bbb();//step-1

案例二：

var a=b=10这种写法在函数内,b其实是全局变量,a当然是局部变量
执行完aaa(),在全局域里alert(a),当然是undefined,alert(b),就会弹出10

黄金守则二：

变量的查找是就近原则，去寻找var定义的变量，当就近没有找到的时候就去查找外层。

look：

这是为什么呢、？ 这里面有两个原因，一是预解析，二是就近查找。

var a=10;
        function aaa(){
            alert(a);//undefined，查找a的时候会现在函数内查找，由于预解析的作用，此时的a是undefined,因此永远不会去查找外面的10了
            var a = 20;

            /*预解析
            var a
            alert(a);
            var a = 20;*/

        }
        aaa();

attention：

这个吧，就验证了第二条，虽然是就近原则，但是是就近找var声明的变量，这个是因为没有var声明的变量是全局的，这里只是修改了a的值。所以上面就是因为在函数内没找到var的a，于是到外面去找了，一找就找到了，于是a就alert出10了；不过没错的是a=20后，a确实为20了，只不过alert的时候还没有执行到那~~

看吧~

下面这个例子，更加验证了js的函数作用域 而已：

这是因为在alert(a)的时候，bbb函数中的a确实为20 ，可是它对于这时的alert(a)这句话来说是局部的，alert(a)根本找不到bbb函数中的a，所以在aaa函数中它找不到a，于是乎去外面找，一找，就找到了10。

黄金守则三：

**当参数跟局部变量重名时，优先级是等同的。**

例：

黄金守则四：

预解析的时候，函数名和变量重名的时候，只留函数，在逐行解析代码的时候，

表达式可以修改预解析的值

<script>

  alert(a);//function a() {alert(4);}
   var a=1;
  alert(a);//1
   function a() {
       alert(3);
   }
     alert(a);//1
    var a=3;
  alert(a);//3
  function a() {
      alert(4);
  }
  alert(a);//3

</script>

例二：

<script>alert(a)</script> // 报错：a is not defined
<script>var a=12;alert(a)</script>

相当于：

<script>
alert(a);    // 弹 undefined
var a = 12;
alert(a);    // 弹 12
</script>

//这相当于

<script>
var a;
alert(a);//a is not defined,没有出错，存在变量a,只是变量值没有定义
a = 12;//a 赋值
alert(a);
</script>

javascript运行机制之执行顺序

step 1. 读入第一个代码块。

step 2. 做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到step5。

step 3. 对var变量和function定义做“预编译处理”（永远不会报错的，因为只解析正确的声明）。

step 4. 执行代码段，有错则报错（比如变量未定义）。

step 5. 如果还有下一个代码段，则读入下一个代码段，重复step2。

step6. 结束。