谈一谈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 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
JavaScript获取GridView选择的行内容
Apr 14 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
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
推荐php模板技术[转]
2007/01/04 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
Javascript UrlDecode函数代码
2010/01/09 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
js创建对象的方式总结
2015/01/10 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
深入解析Python编程中super关键字的用法
2016/06/24 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
python实现输入数字的连续加减方法
2018/06/22 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
python re的findall和finditer的区别详解
2020/11/15 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
类的返射机制中的包及核心类
2016/09/12 面试题
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS