谈一谈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 相关文章推荐
js 目录列举函数
Nov 06 Javascript
JavaScript 字符编码规则
May 04 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 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快速统计某个数据库中每张表的数据量
2012/09/04 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
python使用tornado实现简单爬虫
2018/07/28 Python
python 内置模块详解
2019/01/01 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
家长会主持词开场白
2014/03/18 职场文书
感恩教育活动总结
2014/05/05 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
小学德育工作总结2015
2015/05/12 职场文书
教师节主题班会教案
2015/08/17 职场文书
同学聚会开幕词
2019/04/02 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript