JavaScript 中的执行环境、作用域(scope)以及变量

页面导航:首页 > 网络编程 > JavaScript > JavaScript 中的执行环境、作用域(scope)以及变量

JavaScript 中的执行环境、作用域(scope)以及变量

来源: 作者: 时间:2016-02-21 09:50 【

先看下面一段代码:var a = 0;alert( 1st alert : a = + a);function fun(){ alert( 2nd alert : a = + a); var a = 1; setTimeout(function(){

先看下面一段代码:

var a = 0;
alert("1st alert : a = " + a);
function fun(){
    alert("2nd alert : a = " + a);
    var a = 1;
    setTimeout(function(){
        alert("3rd alert : a = " + a);
        a = 2;
    },1000);
    a = 3;
    setTimeout(function(){
        alert("4th alert : a = " + a);
        a = 4;
    },4000);
}
fun();
alert("5th alert : a = " + a);

代码执行的结果是:

1st alert : a = 0

2nd alert : a = undefined

5th alert : a = 0

3rd alert : a = 3

4th alert : a = 2

疑问1:对于 2nd alert 而言,为什么 a 的值是 undefined ?

首先来看 JS 的执行环境和作用域。

执行环境(executing context)定义了变量或函数有权访问的其他数据。在 JS 中,有两种执行环境,一种是全局环境,也就是 Web 中的 window 对象,而另一种就是函数的执行环境。

在执行环境中存在一个变量对象,这个对象保存了环境中定义的所有变量和函数。

当代码在执行的时候,会创建变量对象的一个作用域链,作用域链的前端是当前环境的变量对象,然后依次是外层环境的变量对象,逐层向外直到全局执行环境。

在标识符的解析过程中,会从前端开始沿着作用域链一级一级搜索,直到找到标识符或搜索完全局环境为止。

所以在 JS 中,花括号并不代表一个独立的作用域,循环体中定义的变量,循环体外依然可能访问到(在同一个执行环境中)

看下面例子:

var a = 0;
function fun(){
    alert("a=" + a);
}
fun();

结果是 a=0

这就是因为在调用 fun 函数的时候,搜索标识符 a 并无法在本执行环境中找到,但是通过作用域链搜索到外层作用域的时候找到了 a

而为什么第一个例子中,2nd alert , a 的值是 undefined ?

这是因为在 JS 中,使用 var 声明的变量或者使用函数声明方式声明的函数(不是函数表达式)会自动被添加到最接近的环境中,也就是所谓的变量提升(hoisting)。什么意思,相当于上面的 fun 函数定义中前两行的代码变成:

function fun(){
    var a;
    alert("2nd alert : a = " + a);
    a = 1;
    //other codes
}

所以在搜索标识符 a 的时候,在本执行环境中就可以搜索到,而不用搜索到外层环境,所以在 2nd alert 中,a 的值就是 undefined。

而对于函数的定义也是如此,这就是为什么使用函数声明的方式时,调用函数可以放在函数声明之前,而使用函数表达式的时候却不可以的原因了。

疑问 2:5th alert 为什么在 3rd 和 4th 之前?

这是因为 Script 引擎对于其任务队列是单线程处理的,而 setTimeout 属于异步代码,只有当 JS 线程中没有同步代码的时候才会执行异步代码。

setTimeout(function(){while(true){}},1000);
setTimeout(function(){alert('end 2');},2000);
setTimeout(function(){alert('end 1');},100);
alert('end');
所以在上面的代码中,首先出现的是 end ,其次是 end 1,之后就再也不会出现。因为在第一个 setTimeout 函数中死循环占用了 JS 引擎的单线程,阻塞了其他进程。



Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<