关于JavaScript的执行环境与作用域的解读

JavaScript高级编程中关于执行环境与作用域的问题在第四章有过提及,但是交代的不是很明确,因此查阅了网上各种资料,对于执行环境以及作用域有了一个初步的认识。

一、什么是执行环境(execution context)

执行环境在书中是这样定义的:执行环境定义了变量或函数有权访问的其他数据,决定了他们各自的行为。

对于execution context的翻译有两种,一种是执行环境,一种是执行上下文。此处使用执行环境的概念。

JavaScript中有以下三种运行环境:

1.全局级的运行环境:默认的代码运行环境,当代码被载入的时候,JavaScript引擎默认进入该环境;

2.函数级的运行环境:执行流进入函数的时候,运行函数中的代码;

3.Eval函数的运行环境:执行Eval()函数内的代码

二、什么是作用域

JavaScript中的作用域分为全局作用域和函数作用域,目前不支持块状作用域。JavaScript的作用是静态作用域也叫词法作用域,意思就是作用域是静态的确定的。有一些说法经常将作用域与执行环境等同起来,个人的理解是这是两个不同层次的概念,虽然两者在某些方面的描述着实有些相似,但是并不能等同起来讲。作用域不光是针对JavaScript这门语言来说的,在其他语言中也有这种概念。而执行环境是JavaScript解释器在解释执行的过程中产生的这种概念。因此个人认为不能等同来讲。

三、什么是执行环境栈

浏览器的JavaScript引擎是单线程,因此在某一个时刻只能有一个事件被激活处理,因此便产生了这样一个执行环境栈。JavaScript的代码被载入到后,JavaScript引擎默认进入全局执行环境,当在全局执行环境中调用一个函数的时候,程序的执行流会进入该函数,同时创建该函数的执行环境,然后将该函数的执行环境压入执行环境栈的顶部。浏览器引擎在执行的时候总是在执行环境栈顶部的执行环境中执行。当顶部执行环境中的代码被执行完毕后,该执行环境被从环境栈顶部弹出,然后在其下的执行环境中执行。这样执行环境经历一个不断压栈,弹栈的过程,直到最底部的全局执行环境。

四、执行环境的创建过程

由上面的描述我们知道,执行环境是一个动态的概念,每当调用一个函数的时候,就会该函数创建一个执行环境。在JavaScript引擎内部这个过程分为两步:

创建阶段

建立变量、函数、arguments对象、参数

建立作用域链

确定this

执行阶段

变量赋值、函数引用、执行其他代码

可以把执行环境想象成一个对象,里面包含了变量对象(函数中的arguments对象,参数,内部的变量以及函数声明),作用域链(当前执行环境的变量对象加上父执行环境的变量对象)以及this的值。

五、执行环境对象创建过程详解

根据上面的描述,执行环境对象的创建发生在函数被调用后,真正的函数体被执行以前。在这个过程中JavaScript引擎会检查函数的参数,变量的声明以及内部的函数,根据获得这些信息创建执行环境对象。这个过程中变量对象(variable object)、作用域链(scope chain)以及this所指定的对象都会被确定。创建过程的具体步骤如下:

找到当前执行环境中被调用函数的代码

被调用函数的函数体执行以前,创建被调用函数的执行环境

进入建立阶段:

a.创建执行环境对象:

建立arguments对象、检查当前执行环境中的参数、建立该对象的属性及属性值

检查当前执行环境中的函数声明:

每找到一个函数声明,就在该执行环境对象下用该函数名建立一个属性,属性值就是一个执行该函数在内存中的一个地址的引用。(这就是一个变量提升的过程)如果上述属性值已经在该执行环境对象中存在,就用新的引用值覆盖之前的值(这就是为什么在JavaScript中不存在函数重载的原因)

检查当前执行环境中的变量声明:

每找到一个变量声明,就在该执行环境对象下用该变量名建立一个属性,属性值就是undefined。如果该属性值已经存在的话,直接跳过(这就是为什么同名的变量无法覆盖同名的函数声明的原因),原属性值不会被修改

b.初始化作用域链

c.确定执行环境中this的指向

代码执行阶段

执行函数体中的代码,给执行环境对象中的属性赋值。

六、实例解析

<script type="text/javascript">

    (function(){

        console.log('execution context test');

        console.log(typeof foo);//function

        console.log(typeof a);//undefined

        console.log(typeof b);//undefined

        console.log(typeof c);//undefined

        function foo(){

            console.log('foo function');

        }

        var foo='test';

        var a='a';

        var b='b';

        var c=function(){

            console.log('c function');

        };

 

    })();

</script>

如上面程序实例所示,创建了一个自执行函数,代码被加载后且代码未被执行前自动创建一个执行环境的对象,并且分析执行环境的参数,然后查找对应的函数声明以及变量声明。这就是为什么在打印foo的类型的时候是function的原因,解析变量声明会被自动赋值为undefindc为一个函数表达式,因此也被解析为变量,赋值为undefind。在有foo函数声明的前提下,代码中又声明了一个foo的变量,这种情况下在解析变量声明的过程中,会发现在执行环境对象中有了一个foo的属性,因此直接跳过。