谈一谈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 相关文章推荐
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
浏览器常用高宽的jquery插件
Feb 24 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
Vue.js动态组件解析
Sep 09 Javascript
浅谈Vue数据响应
Nov 05 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 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
人大复印资料处理程序_补充篇
2006/10/09 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
PHP内核探索之变量
2015/12/22 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
Python中按值来获取指定的键
2019/03/04 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
如何学习Python time模块
2020/06/03 Python
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
武汉高蓝德国际.net机试
2016/06/24 面试题
2014年社区国庆节活动方案
2014/09/16 职场文书
基层党支部整改方案
2014/10/25 职场文书
小学生思想品德评语
2014/12/31 职场文书
工作会议通知
2015/04/15 职场文书
小学思想品德教学反思
2016/02/24 职场文书