你的位置:首页 > Java教程

[Java教程]javascript作用域学习笔记


  以前仅仅知道在script标记中直接声明变量,这个变量便是一个全局变量,在整个页面上都可以访问到(如代码-1)。曾经很长一段时间里让我感到想到困惑,在页面js比较多的情况下,多个文件引入时很可能会有变量被重新申明赋值,于是有了 这样的研究。

  代码-1:

<script>  var a ="1";</script>

  随着学习的深入,后来发现其实代码-1中声明变量的方式,实际作用域是window,所以变量(函数)都被扩展到了window这个对象上。

  代码-2:

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

  再后来发现原来这个叫 execution context(执行环境),于是就有了下面的遇见。

  对于一个有C#或Java或其他语言背景的朋友,对变量的作用域应该是这样的:

  在哪个范围声明就在哪个范围结束(一个成对的{中)。

  代码-3:

<script>  function test(){    if(true){      var a=1;    }    console.log(a);//undefined ?  }</script> 

  对上述代码的执行结果推测应该是undefined吧。可在JavaScript中真的是这样嘛?学习了这么久,个人感觉这是一门能颠覆人生观的编程语言,不能太相信直觉。试了试,发现果然不能用C#的眼光看待JavaScript。

  

  在JavaScript中if语句中的变量申明,会添加到当前执行环境中。代码-3中的执行环境为test这个函数,所以变量a,在整个test函数内可以访问。当函数执行完成后才进行销毁。而函数test的执行环境是什么呢?呵呵,当然是window。

  这个很重要,因为在JavaScript中定义的变量作用域并不是在某个块里,而是在执行环境中(如window,独立的function)。

  代码-4:

<script>  function test(){    function testnew(){      var a = 1;          }    console.log(a); // undefined  }
  testnew()//error ,testnew is not defined.</script>

  上述代码共有3个执行环境,分别是window、test、testnew。虽然testnew的执行环境为test,但在test里并不能访问testnew中声明的变量。同理window中不能访问test中声明的变量。这里需要注意的是,除function外,其他的块级元素不是独立执行环境,如:if,for,try等。所以,呵呵,在if,for,try中声明的变量在同一个执行环境里是可以访问的。

  想想JavaScript给人的感觉是多么“奇葩”(尤其是我们这样的C#程序员),作用域居然叫执行环境,万能围墙大括号居然不再万能。