结合代码图文讲解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 相关文章推荐
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
JS实现图片预加载无需等待
Dec 21 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
使用Javascript简单计算器
Nov 17 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 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 遍历文件实现代码
2011/05/04 PHP
基于php-fpm的配置详解
2013/06/03 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
laravel学习教程之存取器
2016/07/30 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
Django 请求Request的具体使用方法
2019/11/11 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
关于Assembly命名空间的三个面试题
2015/07/23 面试题
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
十岁生日父母答谢词
2014/01/18 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
2014年学习雷锋活动总结
2014/03/01 职场文书
留学顾问岗位职责
2014/04/14 职场文书
应急管理工作总结2015
2015/05/04 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
职工培训工作总结
2015/08/10 职场文书
七年级作文之环保作文
2019/10/17 职场文书
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL