首页 > 代码库 > 小白javascript(一):作用域

小白javascript(一):作用域

作用域(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



小白javascript(一):作用域