小白javascript：作用域

Posted 2020-08-17

作用域（scope）：域可以简单的理解为范围、空间、区域，作用可以简单的理解为可用、可读和可写。顾名思义"作用域"可以简单理解为在一个范围内使得代码可读可写。

块级作用域：任何一对花括号中{}的语句集属于一个块，在这之中定义的所有变量在代码块外都是不可见的。

如下java代码：

public class Test {

public static void main(String[] args) {

    if(true){
          int j =4;
    }
    System.out.println(j);
}
}

 java报错因为j在if的块中定义，所以外层sysout 的时候j不是一个变量。

 

 看下面一段js代码：

<script type="text/javascript">

    if(true){
           var i = 3;
    }
    alert(i);

</script>

alert的值是3，浏览器并没有报错，由此可见javascript中没有块级作用域的概念。也就是说在if else、for循环、while的里面定义 var a和在它们外面定义 var a 实际上是没有差别的。

函数作用域：

看下面一段js代码：

<script type="text/javascript">

function fn1(){

 var a = 0;

}
 alert(a);

</script>

浏览器报错，a is not defined。

由此可见在javascript中有函数作用域，也就是说，只有函数才会创建一个新的作用域。

 

 javascript在执行包括两部分：1、初始化词法环境 2、逐行解读代码

 词法环境：本质上是一种数据结构，可以用来管理静态作用域。也就是说可以用来管理javascript的作用域。（javascript的作用域是静态作用域，有兴趣的同学可以研究一下静态作用域和动态作用域）。

   词法环境由以下两部分组成：

    1.环境记录：包括 变量、形参、函数

    2.对外层词法环境的引用（outer），当然最外层的词法环境它的outer是null   

  初始化词法环境：

在javascript中没有块级作用域，所以只有全局代码或者是函数代码开始执行之前会先把形参、函数定义、变量（使用var定义）写到词法环境。

var定义的变量在初始化到词法环境里面的时候都是undefined。只有执行到赋值语句的时候才能够给变量赋值。

 函数定义在初始化词法环境的时候，会创建函数代码块。

 形参、函数定义、变量在词法环境定义中名称冲突怎么办？

 只留一个，并且函数定义优先级   大于 形参  大于 变量。

javascript在实行代码时候，表达式可以修改环境记录的值。

如下js代码： 

<script type="text/javascript">

  alert(a);

  a = 1;

</script>

浏览器报错，a is not defined。初始化词法环境里a不是形参、函数定义、变量所以浏览器报错

 

<script type="text/javascript">

  alert(a);

  var a = 1 //表达式： = + - % ++ -- ！参数 

</script>

浏览器没有报错，弹出undefined。初始化词法环境里a是变量。

 练习： 

<script type="text/javascript">

    alert(a);//①

    var a = 1;

    alert(a);//②

    function a(){ alert(2);}

    alert(a);//③

    var a = 3;

    alert(a);//④

    function a(){ alert(4);}

    alert(a);//⑤

    a();   //⑥

</script>

形参①function a(){ alert(4);} ②1、③1、④3、⑤3、⑥浏览器报错a不是一个函数。

 

<script type="text/javascript">

   var a = 1;

   function fn1(){

     alert(a);//①

     var a = 2;

   }

   fn1();

   alert(a);//②

</script>

①undefined ②1

 

<script type="text/javascript">

   var a = 1;

   function fn1(){

     alert(a);//①

     a = 2;

   }

   fn1();

   alert(a);//②

</script>

①1 ②2

<script type="text/javascript">

   var a = 1;

   function fn1(a){

     alert(a);//①

     a = 2;

   }

   fn1();

   alert(a);//②

</script>

①undefined ②1