结合代码图文讲解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 相关文章推荐
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
vue实现购物车的监听
Apr 20 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 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
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
Extjs 几个方法的讨论
2010/01/28 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
js实现简单计算器
2015/11/22 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
python实现图片筛选程序
2018/10/24 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
python随机模块random使用方法详解
2020/02/14 Python
python Canny边缘检测算法的实现
2020/04/24 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
通过自学python能找到工作吗
2020/06/21 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
行政办公室岗位职责
2014/03/18 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
创业计划书之酒店
2019/08/30 职场文书