javascript作用域链(Scope Chain)用法实例解析


Posted in Javascript onNovember 30, 2015

本文实例分析了javascript作用域链(Scope Chain)用法。分享给大家供大家参考,具体如下:

关于js的作用域链,早有耳闻,也曾看过几篇介绍性的博文,但一直都理解的模棱两可。近日又精心翻看了一下《悟透Javascript》这本书,觉得写得太深刻,在“代码的时空”一节里有一段介绍作用域链的地方寥寥数语,回味无穷(其实还是理解的模棱两可^_^)。现在整理下自己的读书笔记,顺便借鉴网上资源,写下来。

一、从一个简单的问题说起

下面的js代码在页面中运行显示什么结果:

var arg = 1;
function fucTest(arg) {
  alert(arg);
  var arg = 2;
  //alert(arg);
}
fucTest(10);

您的答案是什么?没错,就是弹出10。我的理解是这样的,funTest函数有一个形参arg,funTest函数传入实参10,alert方法把10弹出就是了,?濉?br /> 好,问题又来了:

var arg = 1;
function funcTest() {
  alert(arg);
  var arg = 2;
}
arg = 10;
funcTest();

答案是什么?如果是5年前的我,肯定不会再往下想了,还是10!这么简单的问题还用想什么呀?我的理解是这样的:funTest函数是一个无参数的函数,函数内部通过alert方法,调用外部(全局)的变量arg,在函数执行前,arg赋值为10,弹出arg值后改变arg值为2,所以弹出值为10。

真的是10吗?是还是不是?

测试的结果:弹出“undefined”,瀑布汗.

二、理解作用域链,从javascript运行机制说起

1、js的运行顺序

如果一个文档流中包含多个script代码段(用script标签分隔的js代码或引入的js文件),它们的运行顺序是:

步骤1. 读入第一个代码段(js执行引擎并非一行一行地执行程序,而是一段一段地分析执行的)
步骤2. 做语法分析,有错则报语法错误(比如括号不匹配等),并跳转到步骤5
步骤3. 对var变量和function定义做“预解析”(永远不会报错的,因为只解析正确的声明)
步骤4. 执行代码段,有错则报错(比如变量未定义)
步骤5. 如果还有下一个代码段,则读入下一个代码段,重复步骤2
步骤6. 结束

上面的分析已经足够清楚,步骤二、三和步骤四里的红色字体可能是我们新手理解上的一个盲点,尤其是步骤三的“预解析”,如果不清楚什么叫预解析,总觉得不踏实。而步骤四的“有错则报错”也是经常碰到的。举例来说:

function funcTest() {
  alert(arg);
  var arg = 2;
}
funcTest();

上面这段代码执行时,弹出“undefined”,也就是说arg没有定义,js的变量不是不用定义也可以吗?

2、语法分析和“预解析”

(1)、从解释型语言的编译过程说起

众所周知,javascript是解释型语言,它不同于c#和java等编译型语言。对于传统编译型语言来说,编译步骤分为:词法分析、语法分析、语义检查、代码优化和字节生成;但对于解释型语言来说,通过词法分析和语法分析得到语法树后,就可以开始解释执行了。

a、词法分析

简单地说,词法分析是将字符流(char stream)转换为记号流(token stream)。
但是这个转换过程并不是可以用一句话就可以概括的那么简单,我们可以试着用伪代码理解一段简单的程序:

代码var result=x-y;的转换大致可以表示如下:

NAME "result"
EQUALS
NAME "x"
MINUS
NAME "y"
SEMICOLON

b、语法分析

简单地说,语法分析就是为了构造合法的语法分析树,而语法分析树可以直观地表示出推导的过程。

那么什么是语法分析树?简单地说,就是程序推导过程的描述。但是到底什么是语法树,请参考专业文章,本篇略过。

c、其他

通过语法分析,构造出语法分析树后,接下来还可能需要进一步的语义检查。对于传统强类型语言来说,语义检查的主要部分是类型检查,比如函数的实参和形参类型是否匹配等等。
结论:通过上面的分析可以看出,对于javascript引擎来说,肯定有词法分析和语法分析,之后可能还有语义检查、代码优化等步骤,等这些编译步骤完成之后(任何语言都有编译过程,只是解释型语言没有编译成二进制代码),才会开始执行代码。

(2)、执行过程

a、javascript的作用域机制

通过编译,javascript代码已经翻译成了语法树,然后会立刻按照语法树执行。

进一步的执行过程,需要理解javascript的作用域机制:词法作用域(lexcical scope)。通俗地讲,就是javascript变量的作用域是在定义时决定而不是执行时决定,也就是说词法作用域取决于源码,编译器通过静态分析就能确定,因此词法作用域也叫做静态作用域(static scope)。但需要注意,with和eval的语义无法仅通过静态技术实现,所以只能说javascript的作用域机制非常接近词法作用域(lexical scope).

javascript引擎在执行每个函数实例时,都会创建一个执行环境(execution context)。执行环境中包含一个调用对象(call object), 调用对象是一个scriptObject结构(scriptObject是与函数相关的一套静态系统,与函数实例的生命周期保持一致),用来保存内部变量表varDecls、内嵌函数表funDecls、父级引用列表upvalue等语法分析结构(注意varDecls和funDecls等信息是在语法分析阶段就已经得到,并保存在语法树中。函数实例执行时,会将这些信息从语法树复制到scriptObject上)。

b、javascript作用域机制的实现方法

词法作用域(lexical scope)是javascript的作用域机制,还需要理解它的实现方法,就是作用域链(scope chain)。作用域链是一个name lookup机制,首先在当前执行环境的scriptObject中寻找,没找到,则顺着upvalue到父scriptObject中寻找,一直lookup到全局调用对象(global object)。

现在回过头来分析第二个问题:

var arg = 1;
function funcTest() {
  alert(arg);
  var arg = 2;
}
arg = 10;
funcTest();

在执行funcTest函数时,也即进入了funcTest对应的作用域,js引擎在执行时,当遇到对变量名或者函数名的使用时,会首先在当前作用域(也即funcTest对应的作用域)查找变量或者函数(显然,arg变量在funcTest对应的作用域里被定义为var arg=2 所以alert方法的参数采用的是当前作用域的arg,但是因为arg被定义在alert方法后,所以arg变量默认值为undefined)。当然,如果没有找到就到上层作用域查找,依此类推(作用域范围可以持续到javascript运行环境的根:window对象)。

最后,让你看的更清楚,上面的代码其实可以等价于:

var arg = 1;
function funcTest() {
  var arg; //默认值undefined
  alert(arg);
  arg = 2;
}
arg = 10;
funcTest();

c、闭包(closure)

当一个函数实例执行时,会创建或关联到一个闭包。 (关于闭包,打算另写一篇学习笔记)

scriptObject用来静态保存与函数相关的变量表,闭包则在执行期动态保存这些变量表及其运行值;

闭包的生命周期有可能比函数实例长。函数实例在活动引用为空后会自动销毁;

闭包则要等要数据引用为空后,由javascript引擎回收(有些情况下不会自动回收,就导致了内存泄漏)。

ps:关于“执行过程”这一段比较拗口,名词很多,不过别被它们吓住,一旦理解了执行环境(execution context)、调用对象(call object)、词法作用域(lexical scope)、作用域链(scope chain)、闭包(closure)等这些概念,javascript的很多现象都能迎刃而解。

三、结语

通过第二段的分析,对照第一段笔者曾经做出的判断(你是不是也觉得笔者曾经的分析和结论很幼稚(哪怕有时结果碰巧也对!)?!不是一般的肤浅啊,^_^),你会发现原来javascript还有这么多“玄机”,而要真正理解精通又谈何容易?先“悟透”再说吧。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
jQuery Ajax文件上传(php)
Jun 16 Javascript
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
javascript常用的方法分享
Jul 01 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
详解JS ES6编码规范
May 07 Javascript
Bootstrap每天必学之js插件
Nov 30 #Javascript
Bootstrap每天必学之面板
Nov 30 #Javascript
Bootstrap每天必学之媒体对象
Nov 30 #Javascript
javascript针对cookie的基本操作实例详解
Nov 30 #Javascript
javascript闭包(Closure)用法实例简析
Nov 30 #Javascript
详解JavaScript的流程控制语句
Nov 30 #Javascript
详解JavaScript的表达式与运算符
Nov 30 #Javascript
You might like
基于php split()函数的用法详解
2013/06/05 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
javascript 运算数的求值顺序
2011/08/23 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
vue多次循环操作示例
2019/02/08 Javascript
express.js中间件说明详解
2019/03/19 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
Python中DJANGO简单测试实例
2015/05/11 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
python实现电脑自动关机
2018/06/20 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
办公室秘书自我鉴定
2014/01/18 职场文书
大学生通用个人的自我评价
2014/02/10 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
旅游节目策划方案
2014/05/26 职场文书
趣味运动会开幕词
2015/01/28 职场文书
推广普通话主题班会
2015/08/17 职场文书
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL