结合代码图文讲解JavaScript中的作用域与作用域链


Posted in Javascript onJuly 05, 2016

先上三段说明作用域的代码

//==========例1==========
 
var scope='global';
function fn(){
  alert(scope);
  var scope='local';
  alert(scope);
}
fn();    //输出结果?
alert(scope);//输出结果?
 
//===========例2==========
 
var scope='global';
function fn(){
  alert(scope);
  scope='local';
  alert(scope);
}
fn();    //输出结果?
alert(scope);//输出结果?
 
//===========例3=========
 
var scope='global';
function fn(scope){
  alert(scope);
  scope='local';
  alert(scope);
}
fn();    //输出结果?
alert(scope);//输出结果?

这三段代码只有小许差异,但结果缺截然不同,例1分别输出[undefined , local , global],例2分别输出[global , local , local],例3结果输出[undefined , local , global],如果不能答对说明你对javascript的作用域特性还未理解透彻。

什么是作用域?

也许有人会问:变量a的作用域是什么?一会儿又问:函数a的作用域是什么?变量和函数的作用域分别是啥玩意?

我们先来看看“作用域”是什么意思,“作用域”拆开来就是“作用”和“域”

  • 作用:访问、操作、调用……
  • 域:区域、范围、空间……

作用域就是变量和函数的可访问范围,或者说变量或函数起作用的区域。

1.javascript函数的作用域:

函数内的区域,就是这个函数的作用域,变量和函数在这个区域都可以访问操作。最外层函数外的区域叫全局作用域,函数内的区域叫局部作用域。

2.javascript变量的作用域:

在源代码中变量所在的区域,就是这个变量的作用域,变量在这个区域内可以被访问操作。在全局作用域上定义的变量叫全局变量,在函数内定义的变量叫局部变量。

简单地理解,JS源代码被函数{ }划分成一块一块的区域,这些区域换个身份就是某函数或某变量的作用域,变量的作用域和函数的作用域在源代码中有可能指的是同一块区域。

作用域链
作用域链(Scope Chain)是javascript内部中一种变量、函数查找机制,它决定了变量和函数的作用范围,即作用域,理解作用域链的作用原理,上一篇文章的三个例子也就能理解了,从而知其然也知其所以然。

作用域链是ECMAScript-262说明文档中的概念,javascript引擎是按ECMAScript-262说明文档去实现的,了解javascript引擎的工作原理有利于我们理解javascript的特性,但绝大多数js程序员不会去了解非常底层的技术,所以阅读ECMAScript-262说明文档,我们可以有一个直观的方式去模拟javascript引擎的工作原理。

本文将通过1999年的ECMAScript-262-3th第三版来说明作用域链的形成原理,将会介绍执行环境,变量对象和活动对象,arguments对象,作用域链等几个概念。2009年发布了ECMAScript-262-5th第五版,不同的是取消了变量对象和活动对象等概念,引入了词法环境(Lexical Environments)、环境记录(EnviromentRecord)等新的概念,所以两个版本的概念不要混淆了。

1.执行环境(Execution Contexts)

执行环境(Execution Contexts)也被翻译为执行上下文,当解析器进入ECMAScript的可执行代码,解析器就进入一个执行环境,活动的执行环境组成一个逻辑上的栈,在这个逻辑栈顶部的执行环境是当前运行的执行环境。

注:ECMAScript中有三种可执行代码,Global、Function和Eval,全局环境即是Global可执行代码,函数即是Function可执行代码。逻辑栈是一种特殊的数据存储格式,特点是‘先进后出,后进先出',添加数据会先压入逻辑栈顶部,删除数据必须先从顶部开始删除。

结合代码图文讲解JavaScript中的作用域与作用域链

变量对象(Variable Object)、活动对象(Activation Object)和Arguments对象(Arguments Object)

每个执行环境都有一个与之关联的变量对象,当解析器进入执行环境时,就会创建一个变量对象,变量对象保存着在当前执行环境中声明的变量和函数的引用。

变量对象是一个抽象的概念,在不同的执行环境中,变量对象有不同的身份,在解析器进入任何执行环境之前,就已经创建了一个Global对象,当解析器进入全局执行环境时,Global对象就充当变量对象,当解析器进入一个函数时,就会创建一个活动对象充当变量对象。

2.解析器处理代码时的两个阶段

我们都知道javascript解析器是一段一段解析处理代码的,为毛?这就要涉及解析器处理代码时的两个阶段,解析代码和执行代码。

当解析器进入执行环境时,变量对象就会添加执行环境中声明的变量和函数作为它的属性,这就意味着变量和函数在声明之前已经可用,变量值为undefined,这就是变量和函数声明提升(Hoisting)的原因,与此同时作用域链和this确定,此过程为解析阶段,俗称预解析。接着解析器开始执行代码,为变量添加相应值的引用,得到执行结果,此过程为执行阶段。

举两个好吃的栗子:

var a=123;
var b="abc";
function c(){
  alert('11');
}

上述全局环境中的代码解析执行后,会将Global对象作为变量对象,保存以下数据。

结合代码图文讲解JavaScript中的作用域与作用域链

function testFn(a){
  var b="123";
  function c(){
    alert("abc");
  }
}
 
testFn(10);

当解析器进入函数执行环境时,则会创建一个活动对象作为变量对象,活动对象还会创建一个Arguments对象,arguments对象是一个参数集合,用来保存参数,这就是我们写函数时可以使用arguments[0]等来使用参数的原因。

结合代码图文讲解JavaScript中的作用域与作用域链

3.作用域链(Scope Chain)

每个执行环境都有一个与之关联的作用域链,当解析器进入执行环境时被定义,作用域链是一个对象列表,用来检索各个变量对象中的变量和函数,这样可以保证执行环境有权访问哪些变量和函数,举个栗子。

var a='123';
function testFn(b){
  var c='abc';
 
  function testFn2(){
    var d='efg';
    alert(a);
  }
 
  testFn2();
}
 
testFn(10);

testFn2内未声明变量a,为什么testFn2能调用全局变量a?整个过程是怎么发生的呢?请看下图。

结合代码图文讲解JavaScript中的作用域与作用域链

当解析器进入全局执行环境时,调用变量和函数时只在Global对象中查找。

当解析器进入testFn函数执行环境时,函数内部属性[[scope]]中首先填入Global对象,然后将testFn活动对象添加到Global对象之前,形成一个作用域链。

结合代码图文讲解JavaScript中的作用域与作用域链

当解析器进入testFn2函数执行环境时,函数内部属性[[scope]]首先填入父级的作用域链,然后再将当前的testFn2活动对象添加到作用域链的前端,形成一个新的作用域链。

testFn2调用变量a时,首先在当前的testFn2活动对象中查找,如果没有找到就顺着作用域链向上,在testFn活动对象中查找变量a,如果没有找到再顺着作用域链向上查找,直到在最后Global对象中找到为止,否则报错。所以函数内部可以调用外部环境的变量,外部环境不能调用函数内部的变量,这就是作用域特性的原理。

Javascript 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
jquery easyui使用心得
Jul 07 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 #Javascript
Node.js实现文件上传
Jul 05 #Javascript
JavaScript数组方法大全(推荐)
Jul 05 #Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 #Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 #Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 #Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 #Javascript
You might like
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
解析php5配置使用pdo
2013/07/03 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
python类的继承实例详解
2017/03/30 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
客服专员岗位职责
2014/02/28 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
教务处干事工作总结
2015/08/14 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
Python天气语音播报小助手
2021/09/25 Python
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫