谈一谈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 相关文章推荐
Javascript计算时间差的函数分享
Jul 04 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 Javascript
Javascript使用integrity属性进行安全验证
Nov 07 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自动生成月历代码
2006/10/09 PHP
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
php统计文章排行示例
2014/03/04 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
小程序转发探索示例
2019/02/19 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
python isinstance函数用法详解
2020/02/13 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
高中毕业的自我鉴定
2013/12/09 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
怎样写工作总结啊!
2019/06/18 职场文书