结合代码图文讲解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 实例一(first)
Mar 16 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
tracking.js实现前端人脸识别功能
Apr 16 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
php json转换相关知识(小结)
2018/12/21 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
JS实现留言板功能
2017/06/17 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
JS实现图片切换效果
2018/11/17 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
django列表筛选功能的实现代码
2020/03/27 Python
Prototype是怎么扩展DOM的
2014/10/01 面试题
大学军训感言
2014/01/10 职场文书
博士生专家推荐信
2014/09/26 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
小学音乐课教学反思
2016/02/18 职场文书
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL