谈一谈js中的执行环境及作用域


Posted in Javascript onMarch 30, 2016

最近在面试时被问到了对作用域链的理解,感觉当时回答的不是很好,今天就来说说js中的作用域链吧。

首先来说说js中的执行环境,所谓执行环境(有时也称环境)它是JavaScript中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据 ,决定了它们各自的行为。而每个执行环境都有一个与之相关的变量对象,环境中定义的所有变量和函数都保存在这个对象中。

理解了执行环境,现在就看看什么是作用域链吧。每个函数都有自己的执行环境,当代码在执行环境中执行时,就会创建变量对象的作用域链。作用域链保证了对执行环境有权访问所有变量和函数的有序访问。作用域链的前端,始终都是当前执行的代码所在的环境的变量对象,如果环境是一个函数,那么它的变量对象就是该函数的活动对象。作用域链的下一个变量对象来自包含(外部)环境,再下一个变量对象来自下一个包含环境。这样一直延续到全局执行环境,记住,全局执行环境的变量对象永远是作用域中的最后一个对象。

请看下面的例子:

var scope="global";
function foo(){
  console.log(scope);
}  
foo();

在这个例子中,函数foo()的作用域链包含了两个对象,一个是它自身对象,另一个是全局环境中的变量对象。因为我们可以在这个作用域链中找的scope,所以可以在函数内部里访问到它。

在看一个例子:

var color = "blue";
function changeColor(){
  var anoterColor = "red";
  function swapColor(){
    var tempColor = anoterColor;
    anoterColor = color;
    color = tempColor;
    console.log(color);
  }
  swapColor();
}
changeColor();

在这个例子中,有三个执行环境:全局环境、changeColor()的局部环境和swapColor()局部环境。我们来看看这个例子的作用域链是怎样的吧。

谈一谈js中的执行环境及作用域

图中的矩形表示特定的执行环境。我们可以看到变量tempColor只能在swapColor()环境中访问到,而在changeColor()的局部环境还是全局环境中都无法访问到它。因此我们可以得到一个结论:内部的环境可以通过作用域链访问所有的外部环境,但外部的环境无法访问内部的环境中的任何变量和函数。每个环境都可以向上搜索作用域链,以查询变量和函数名;但是任何环境都不能通过向下搜索作用域而进入另一个执行环境。

作用域中我还想说说的是:js没有块级作用域

为什么说js没有块级作用域呢?我们来看下面的代码:

if(true){
 var color = "blue"; 
}
alert(color);  //"blue"

咦,为什么color在if语句执行完毕后被销毁呢?哈哈,如果在C、C++或Java中,color确实会被销毁,但在JavaScript中,if语句中的变量声明会将变量添加到当前的执行环境中(在这里是全局环境)中。特别地,在for语句时要牢记这一差异,例如:

for(var i = 0;i< 10; i++){
doSomething(i);
}
alert(i);    //10

记住:在JavaScript中,由for语句创建的变量i即使在for循环执行结束之后,也依然会存在于循环外部的执行环境中。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Prototype 学习 Prototype对象
Jul 12 Javascript
js调试系列 初识控制台
Jun 18 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
js实现(全选)多选按钮的方法【附实例】
Mar 30 #Javascript
用JS生成UUID的方法实例
Mar 30 #Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 #Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 #Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 #Javascript
jquery实现一个简单的表单验证实例
Mar 30 #Javascript
js实现密码强度检测【附示例】
Mar 30 #Javascript
You might like
摩卡咖啡
2021/03/03 咖啡文化
php分页函数
2006/07/08 PHP
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
Python脚本实现格式化css文件
2015/04/08 Python
python中pass语句用法实例分析
2015/04/30 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
python实现微信自动回复功能
2018/04/11 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
大专学生推荐信范文
2013/11/19 职场文书
公司企业表扬信
2014/01/11 职场文书
办理生育手续介绍信
2014/01/14 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
质检员岗位职责范本
2015/04/07 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers