你的位置:首页 > 软件开发 > Java > 深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域

深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域

发布时间:2016-07-31 21:00:06
×目录[1]图示 [2]概念 [3]说明[4]总结前面的话  对于执行环境(execution context)和作用域(scope)并不容易区分,甚至很多人认为它们就是一回事,只是高程和犀牛书关于作用域的两种不同翻译而已。但实际上,它们并不相同,却相互纠缠在 ...

深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域

×
目录
[1]图示 [2]概念 [3]说明[4]总结

【作用域链和自由变量】

  各个作用域的嵌套关系组成了一条作用域链。例子中bar函数保存的作用域链是bar -> fn -> 全局,fn函数保存的作用域链是fn -> 全局

  使用作用域链主要是进行标识符的查询,标识符解析就是沿着作用域链一级一级地搜索标识符的过程,而作用域链就是要保证对变量和函数的有序访问

  【1】如果自身作用域中声明了该变量,则无需使用作用域链

  在下面的例子中,如果要在bar函数中查询变量a,则直接使用LHS查询,赋值为100即可

var a = 1;var b = 2;function fn(x){  var a = 10;  function bar(x){    var a = 100;    b = x + a;    return b;  }  bar(20);  bar(200);}fn(0);

  这是例子中的代码执行到第15行时fn(0)函数的执行环境,执行环境里面保存了fn()函数作用域内所有的变量和函数的值

深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域  [注意]在程序代码执行之前存在着编译和声明提升(hoisting)的过程,本例中假设代码是已经经过声明提升过程之后的代码

  当bar(20)函数执行完成后,当前程序的执行环境栈如下图所示,bar(20)函数的执行环境被销毁,等待垃圾回收,控制权交还给黄色背景的fn(0)执行环境

 

  【1】代码执行流进入全局执行环境,并对全局执行环境中的代码进入声明提升(hoisting)

深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域  【3】执行流执行第15行代码fn(0);,调用fn(0)函数,此时执行流进入fn(0)函数执行环境中,对该执行环境中的代码进行声明提升过程,并将实参0赋值给形参x中。此时执行环境栈中存在两个执行环境,fn(0)函数为当前执行流所在执行环境  【4】执行流执行第5行代码var a = 10;,对a进行LHS查询,给a赋值10  【5】执行流执行第12行代码bar(20);,调用bar(20)函数,此时执行流进入bar(20)函数执行环境中,对该执行环境中的代码进行声明提升过程,并将实参20赋值给形参x中。此时执行环境栈中存在三个执行环境,bar(20)函数为当前执行流所在执行环境  【6】执行流执行第8行代码var a = 100;,给a赋值100;执行流执行第9行b = x + a;,对x进行RHS查询,找到x的值是20,对a进行RHS查询,找到a的值是100,所以通过计算b的值是120,给b赋值120;执行第10行代码return b;,对b进行RHS查询,找到b的值是120,所以函数返回值为120  【7】执行流执行完第10行代码后,bar(20)的执行环境被弹出执行环境栈,并被销毁,等待垃圾回收,控制权交还给fn(0)函数的执行环境  【8】执行流执行第13行代码bar(200);,调用bar(200)函数,此时执行流进入bar(200)函数执行环境中,对该执行环境中的代码进行声明提升过程,并将实参200赋值给形参x中。此时执行环境栈中存在三个执行环境,bar(200)函数为当前执行流所在执行环境  【9】与第6步相同,执行流执行第8行代码var a = 100;,给a赋值100;执行流执行第9行b = x + a;,对x进行RHS查询,找到x的值是20,对a进行RHS查询,找到a的值是100,所以通过计算b的值是120,给b赋值120;执行第10行代码return b;,对b进行RHS查询,找到b的值是120,所以函数返回值为120  【10】执行流执行完第10行代码后,bar(200)的执行环境被弹出执行环境栈,并被销毁,等待垃圾回收,控制权交还给fn(0)函数的执行环境  【11】执行流执行第14行代码},fn(0)的执行环境被弹出执行环境栈,并被销毁,等待垃圾回收,控制权交还给全局执行环境  【12】当页面关闭时,全局执行环境被销毁,页面再无执行环境 

原标题:深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。