谈一谈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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
vue中实现动态生成二维码的方法
Feb 21 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
php实现的CSS更新类实例
2014/09/22 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
python自动生成model文件过程详解
2019/11/02 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
python中time包实例详解
2021/02/02 Python
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
园长自我鉴定
2013/10/06 职场文书
职工趣味运动会方案
2014/02/10 职场文书
授权委托书格式模板
2014/04/03 职场文书
加入学生会演讲稿
2014/04/24 职场文书
医学生求职自荐书
2014/06/12 职场文书
仙境之桥观后感
2015/06/16 职场文书
暑假打工感想
2015/08/07 职场文书
演讲稿之开卷有益
2019/08/07 职场文书