老生常谈原生JS执行环境与作用域


Posted in Javascript onNovember 22, 2016

首先,我们要知道执行环境和作用域是两个完全不同的概念。

函数的每次调用都有与之紧密相关的作用域和执行环境。从根本上来说,作用域是基于函数的,而执行环境是基于对象的(例如:全局执行环境即window对象)。

换句话说,作用域涉及到所被调用函数中的变量访问,并且不同的调用场景是不一样的。执行环境始终是this关键字的值,它是拥有当前所执行代码的对象的引用。每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象,但解析器在处理数据时会在后台使用它。

执行环境(也称执行上下文?execution context)

当JavaScript解释器初始化执行代码时,它首先默认进入全局执行环境,从此刻开始,函数的每次调用都会创建一个新的执行环境。

每个函数都有自己的执行环境。当执行流进入一个函数时,函数的环境就会被推入一个环境栈中(execution stack)。在函数执行完后,栈将其环境弹出,把控制权返回给之前的执行环境。ECMAScript程序中的执行流正是由这个便利的机制控制着。

执行环境可以分为创建和执行两个阶段。在创建阶段,解析器首先会创建一个变量对象(variable object,也称为活动对象 activation object),它由定义在执行环境中的变量、函数声明、和参数组成。在这个阶段,作用域链会被初始化,this的值也会被最终确定。在执行阶段,代码被解释执行。

Demo:

<script type="text/javascript">
  function Fn1(){
    function Fn2(){
      alert(document.body.tagName);//BODY
      //other code...
    }
    Fn2();
  }
  Fn1();
  //code here
</script>

老生常谈原生JS执行环境与作用域

小结

当javascript代码被浏览器载入后,默认最先进入的是一个全局执行环境。当在全局执行环境中调用执行一个函数时,程序流就进入该被调用函数内,此时JS引擎就会为该函数创建一个新的执行环境,并且将其压入到执行环境堆栈的顶部。浏览器总是执行当前在堆栈顶部的执行环境,一旦执行完毕,该执行环境就会从堆栈顶部被弹出,然后,进入其下的执行环境执行代码。这样,堆栈中的执行环境就会被依次执行并且弹出堆栈,直到回到全局执行环境。

此外还要注意一下几点:

单线程

同步执行

唯一的全局执行环境

局部执行环境的个数没有限制

每次某个函数被调用,就会有个新的局部执行环境为其创建,即使是多次调用的自身函数(即一个函数被调用多次,也会创建多个不同的局部执行环境)。

作用域

当代码在一个环境中执行时,会创建变量对象的一个作用域链(scope chain)。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。

作用域链包含了执行环境栈中的每个执行环境对应的变量对象。通过作用域链,可以决定变量的访问和标识符的解析。

注意:全局执行环境的变量对象始终都是作用域链的最后一个对象。

在访问变量时,就必须存在一个可见性的问题(内层环境可以访问外层中的变量和函数,而外层环境不能访问内层的变量和函数)。更深入的说,当访问一个变量或调用一个函数时,JavaScript引擎将不同执行环境中的变量对象按照规则构建一个链表,在访问一个变量时,先在链表的第一个变量对象上查找,如果没有找到则继续在第二个变量对象上查找,直到搜索到全局执行环境的变量对象即window对象。这也就形成了Scope Chain的概念。

老生常谈原生JS执行环境与作用域

作用域链图,清楚的表达了执行环境与作用域的关系(一一对应的关系),作用域与作用域之间的关系(链表结构,由上至下的关系)。

Demo:

var color = "blue";
function changeColor(){
 var anotherColor = "red";
 function swapColors(){
  var tempColor = anotherColor;
  anotherColor = color;
  color = tempColor;
  // 这里可以访问color, anotherColor, 和 tempColor
 }
 // 这里可以访问color 和 anotherColor,但是不能访问 tempColor
 swapColors();
}
changeColor();
// 这里只能访问color
console.log("Color is now " + color);

上述代码一共包括三个执行环境:全局执行环境、changeColor()的局部执行环境、swapColors()的局部执行环境。

全局环境有一个变量color和一个函数changecolor();

changecolor()函数的局部环境中具有一个anothercolor属性和一个swapcolors函数,当然,changecolor函数中可以访问自身以及它外围(即全局环境)中的变量;

swapcolor()函数的局部环境中具有一个变量tempcolor。在该函数内部可以访问上面的两个环境(changecolor和window)中的所有变量,因为那两个环境都是它的父执行环境。

上述代码的作用域链如下图所示:

老生常谈原生JS执行环境与作用域

从上图发现。内部环境可以通过作用域链访问所有的外部环境,但是外部环境不能访问内部环境中的任何变量和函数。

标识符解析(变量名或函数名搜索)是沿着作用域链一级一级地搜索标识符的过程。搜索过程始终从作用域链的前端开始,然后逐级地向后(全局执行环境)回溯,直到找到标识符为止。

执行环境与作用域的区别与联系

执行环境为全局执行环境和局部执行环境,局部执行环境是函数执行过程中创建的。

作用域链是基于执行环境的变量对象的,由所有执行环境的变量对象(对于函数而言是活动对象,因为在函数执行环境中,变量对象是不能直接访问的,此时由活动对象(activation object,缩写为AO)扮演VO(变量对象)的角色。)共同组成。

当代码在一个环境中执行时,会创建变量对象的一个作用域链。作用域链的用途:是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端,始终都是当前执行的代码所在环境的变量对象。

小练习

<script type="text/javascript">
(function(){
  a= 5;
  console.log(window.a);//undefined
  var a = 1;//这里会发生变量声明提升
  console.log(a);//1
})();
</script>

window.a之所以是undefined,是因为var a = 1;发生了变量声明提升。相当于如下代码:

<script type="text/javascript">
(function(){
  var a;//a是局部变量
  a = 5;//这里局部环境中有a,就不会找全局中的
  console.log(window.a);//undefined
  a = 1;//这里会发生变量声明提升
  console.log(a);//1
})();
</script>

以上就是小编为大家带来的老生常谈原生JS执行环境与作用域全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
vue mint-ui tabbar变组件使用
May 04 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
JS中位置与大小的获取方法
Nov 22 #Javascript
javascript中Date对象的使用总结
Nov 21 #Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 #Javascript
使用Angular.js实现简单的购物车功能
Nov 21 #Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 #Javascript
JS实现图片上传预览功能
Nov 21 #Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 #Javascript
You might like
一些花式咖啡的配方
2021/03/03 冲泡冲煮
php 自定义错误日志实例详解
2016/11/12 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
jquery 页面全选框实践代码
2010/04/02 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
Python Queue模块详细介绍及实例
2016/12/27 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
python for循环remove同一个list过程解析
2019/08/14 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
python enumerate内置函数用法总结
2020/01/07 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
python Zmail模块简介与使用示例
2020/12/19 Python
优秀高中生事迹材料
2014/02/11 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
python实现高效的遗传算法
2021/04/07 Python
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
zabbix监控mysql的实例方法
2021/06/02 MySQL
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python