javascript执行环境及作用域详解

最近在重读《javascript高级程序设计3》,觉得应该写一些博客记录一下学习的一些知识,不然都忘光啦。今天要总结的是js执行环境和作用域。

首先来说一下执行环境 

一、执行环境
        书上概念,执行环境定义了变量或者函数有权访问的其他数据,决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象。环境中定义的所有变量和函数都保存在这个对象中。虽然我们在编写代码的时候无法访问这个对象,但解析器在处理数据时会在后台用到它。

  执行环境是一个概念,一种机制,它定义了变量或函数是否有权访问其他数据

javascript中,可执行的JavaScript代码分三种类型:
       1. Global Code,即全局的、不在任何函数里面的代码,例如:一个js文件、嵌入在HTML页面中的js代码等。
       2. Eval Code,即使用eval()函数动态执行的JS代码。
       3. Function Code,即用户自定义函数中的函数体JS代码。

跳过Eval Code,只说全局执行环境和函数执行环境。 

1、全局环境:

  全局环境是最外围的一个执行环境。全局执行环境被认为是window对象。因此所有全局变量和函数都是作为window对象的属性和方法创建的。代码载入浏览器时,全局执行环境被创建(当我们关闭网页或者浏览器时全局执行环境才被销毁)。比如在一个页面中,第一次载入JS代码时创建一个全局执行环境。

  这也是为什么闭包有一个内存泄露的缺点。因为闭包中外部函数被当成了全局环境。所以不会被销毁,一直保存在内存中。

2、函数执行环境

  每个函数都有自己的执行环境,当执行进入一个函数时,函数的执行环境就会被推入一个执行环境栈的顶部并获取执行权。当这个函数执行完毕,它的执行环境又从这个栈的顶部被删除,并把执行权并还给之前执行环境。这就是ECMAScript程序中的执行流。

  也可以这样解读:当调用一个 JavaScript 函数时,该函数就会进入与该函数相对应的执行环境。如果又调用了另外一个函数,则又会创建一个新的执行环境,并且在函数调用期间执行过程都处于该环境中。当调用的函数返回后,执行过程会返回原始执行环境。因而,运行中的 JavaScript 代码就构成了一个执行环境栈。

  当函数被调用时函数的局部环境被创建(函数内的代码执行完毕后,该环境被销毁,同时保存在其中的所有变量和函数定义也随之被销毁)。

2-1定义期 

  函数定义的时候,都会创建一个[[scope]]属性,通这个对象对应的是一个对象的列表,列表中的对象仅能javascript内部访问,没法通过语法访问。

  (scope也就是作用域的意思。) 

  我们定义一全局函数A,那么A函数就创建了一个A的[[scope]]属性。此时,[[scope]]里面只包含了全局对象【Global Object】。

  而如果, 我们在A的内部定义一个B函数,那B函数同样会创建一个[[scope]]属性,B的[[scope]]属性包含了两个对象,一个是A的活动对象Activation Object、一个是全局对象,A的活动对象在前面,全局对象排在后面。

  简而言之,一个函数的[Scope]属性中对象列表的顺序是上一层函数的Activation Object对象,然后是上上层的,一直到最外层的全局对象。  

下面是示例代码:A只有一个scope,B有两个scope

// 外部函数 function A(){ var somevar; // 内部函数 function B(){ var somevar; } }

2-2执行期 

  当函数被执行的时候,就是进入这个函数的执行环境,首先会创一个它自己的活动对象【Activation Object】(这个对象中包含了this、参数(arguments)、局部变量(包括命名的参数)的定义和一个变量对象的作用域链[[scope chain]],然后,把这个执行环境的[scope]按顺序复制到[[scope chain]]里,最后把这个活动对象推入到[[scope chain]]的顶部。这样[[scope chain]]就是一个有序的栈,这样保了对执行环境有权访问的所有变量和对象的有序访问。

// 第一步页面载入创全局执行环境global executing context和全局活动象 // 定义全局[[scope]],只含有Window对象 // 扫描全局的定义变量及函数对象:color【undefined】、changecolor【FD创建changecolor的[[scope]],此时里面只含有全局活动对象】,加入到window中,所以全局变量和全局函数对象都是做为window的属性定义的。 // 程序已经定义好所以在此执行环境内任何位置都可以执行changecolor(),color也已经被定义,但是它的值是undefined // 第二步color赋值"blue" var color = "blue"; // 它是不需要赋值的,它就是引用本身 function changecolor() { // 第四步进入changecolor的执行环境 // 复制changecolor的[[scope]]到scope chain // 创建活动对象,扫描定义变量和定义函数,anothercolor【undefined】和swapcolors【FD创建swapcolors的[[scope]]加入changecolor的活动对象和全局活动对象】加入到活动对象,活动对象中同时还要加入arguments和this // 活动对象推入scope chain 顶端 // 程序已经定义好所以在此执行环境内任何位置都可以执行swapcolors(),anothercolor也已经被定义好,但它的值是undefined // 第五anothercolor赋值"red" var anothercolor = "red"; // 它是不需要赋值的,它就是引用本身 function swapcolors() { // 第七步进入swapcolors的执行环境,创建它的活动对象 // 复制swapcolors的[[scope]]到scope chain // 扫描定义变量和定义函数对象,活动对象中加入变量tempcolor【undefined】以及arguments和this // 活动对象推入scope chain 顶端 // 第八步tempcolor赋值anothercolor,anothercolor和color会沿着scope chain被查到,并继续往下执行 var tempcolor = anothercolor; anothercolor = color; color = tempcolor; } // 第六步执行swapcolors,进入其执行环境 swapcolors(); } // 第三步执行changecolor,进入其执行环境 changecolor();

2-3访问标识符:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzpsxp.html