谈一谈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实现的立体文字渐变效果
May 17 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
vue使用节流函数的踩坑实例指南
May 20 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
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
求网格中的黑点分布
2013/11/06 面试题
cf收人广告词大全
2014/03/14 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
Django显示可视化图表的实践
2021/05/10 Python
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript