谈一谈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.validate 常用方法及需要注意的问题
Mar 20 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
webpack入门必知必会
Jan 16 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
ADODB的数据库封包程序库
2006/12/31 PHP
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
Python实现的矩阵类实例
2017/08/22 Python
Python语言实现将图片转化为html页面
2017/12/06 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
十佳护士获奖感言
2014/02/18 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
大客户经理岗位职责
2015/04/09 职场文书
2016年母亲节广告语
2016/01/28 职场文书