谈一谈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学习笔记之jQuery原型属性和方法
Jun 09 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
vue环境搭建简单教程
Nov 07 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 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批量生成静态HTML的简单原理和方法
2014/04/20 PHP
php和nginx交互实例讲解
2019/09/24 PHP
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
python 简单的绘图工具turtle使用详解
2017/06/21 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
工程总经理工作职责
2013/12/09 职场文书
写自荐信要注意什么
2013/12/26 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
供用电专业求职信
2014/07/07 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
大一新生检讨书
2014/10/29 职场文书
集结号观后感
2015/06/08 职场文书
同学联谊会邀请函
2019/06/24 职场文书
Redis如何实现分布式锁
2021/08/23 Redis