深入理解javascript作用域第二篇之词法作用域和动态作用域


Posted in Javascript onJuly 24, 2016

前面的话

大多数时候,我们对作用域产生混乱的主要原因是分不清楚应该按照函数位置的嵌套顺序,还是按照函数的调用顺序进行变量查找。再加上this机制的干扰,使得变量查找极易出错。这实际上是由两种作用域工作模型导致的,作用域分为词法作用域和动态作用域,分清这两种作用域模型就能够对变量查找过程有清晰的认识。本文是深入理解javascript作用域系列第二篇——词法作用域和动态作用域

词法作用域

第一篇介绍过,编译器的第一个工作阶段叫作分词,就是把由字符组成的字符串分解成词法单元。这个概念是理解词法作用域的基础

简单地说,词法作用域就是定义在词法阶段的作用域,是由写代码时将变量和块作用域写在哪里来决定的,因此当词法分析器处理代码时会保持作用域不变

关系

无论函数在哪里被调用,也无论它如何被调用,它的词法作用域都只由函数被声明时所处的位置决定

function foo(a) {
var b = a * 2;
function bar(c) {
console.log( a, b, c );
}
bar(b * 3);
}
foo( 2 ); // 2 4 12

在这个例子中有三个逐级嵌套的作用域。为了帮助理解,可以将它们想象成几个逐级包含的气泡

作用域气泡由其对应的作用域块代码写在哪里决定,它们是逐级包含的

气泡1包含着整个全局作用域,其中只有一个标识符:foo

气泡2包含着foo所创建的作用域,其中有三个标识符:a、bar和b

气泡3包含着bar所创建的作用域,其中只有一个标识符:c

查找

作用域气泡的结构和互相之间的位置关系给引擎提供了足够的位置信息,引擎用这些信息来查找标识符的位置

在代码片段中,引擎执行console.log(...)声明,并查找a、b和c三个变量的引用。它首先从最内部的作用域,也就是bar(...)函数的作用域开始查找。引擎无法在这里找到a,因此会去上一级到所嵌套的foo(...)的作用域中继续查找。在这里找到了a,因此引擎使用了这个引用。对b来讲也一样。而对c来说,引擎在bar(...)中找到了它

[注意]词法作用域查找只会查找一级标识符,如果代码引用了foo.bar.baz,词法作用域查找只会试图查找foo标识符,找到这个变量后,对象属性访问规则分别接管对bar和baz属性的访问

foo = {
bar:{
baz: 1
}
};
console.log(foo.bar.baz);//1

遮蔽

作用域查找从运行时所处的最内部作用域开始,逐级向外或者说向上进行,直到遇见第一个匹配的标识符为止

在多层的嵌套作用域中可以定义同名的标识符,这叫作“遮蔽效应”,内部的标识符“遮蔽”了外部的标识符

var a = 0;
function test(){
var a = 1;
console.log(a);//1
}
test();

全局变量会自动为全局对象的属性,因此可以不直接通过全局对象的词法名称,而是间接地通过对全局对象属性的引用来对其进行访问

var a = 0;
function test(){
var a = 1;
console.log(window.a);//0
}
test();

通过这种技术可以访问那些被同名变量所遮蔽的全局变量。但非全局的变量如果被遮蔽了,无论如何都无法被访问到

动态作用域

javascript使用的是词法作用域,它的最重要的特征是它的定义过程发生在代码的书写阶段

那为什么要介绍动态作用域呢?实际上动态作用域是javascript另一个重要机制this的表亲。作用域混乱多数是因为词法作用域和this机制相混淆,傻傻分不清楚

动态作用域并不关心函数和作用域是如何声明以及在任何处声明的,只关心它们从何处调用。换句话说,作用域链是基于调用栈的,而不是代码中的作用域嵌套

var a = 2;
function foo() {
console.log( a );
}
function bar() {
var a = 3;
foo();
}
bar();

【1】如果处于词法作用域,也就是现在的javascript环境。变量a首先在foo()函数中查找,没有找到。于是顺着作用域链到全局作用域中查找,找到并赋值为2。所以控制台输出2

【2】如果处于动态作用域,同样地,变量a首先在foo()中查找,没有找到。这里会顺着调用栈在调用foo()函数的地方,也就是bar()函数中查找,找到并赋值为3。所以控制台输出3

小结:两种作用域的区别,简而言之,词法作用域是在定义时确定的,而动态作用域是在运行时确定的

以上所述是小编给大家介绍的深入理解javascript作用域第二篇之词法作用域和动态作用域,希望对大家有所帮助,如果大家想了解更多内容敬请关注三水点靠木!

Javascript 相关文章推荐
JavaScript 字符串连接性能优化
Dec 20 Javascript
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
Node.js的特点详解
Feb 03 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
关于input全选反选恶心的异常情况
Jul 24 #Javascript
JS中的==运算: [''] == false —>true
Jul 24 #Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 #Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 #Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 #Javascript
省市二级联动小案例讲解
Jul 24 #Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 #Javascript
You might like
PHP常用函数小技巧
2008/09/11 PHP
深入PHP变量存储的详解
2013/06/13 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
php判断当前操作系统类型
2015/10/28 PHP
PHP实现计算器小功能
2020/08/28 PHP
jquery tools之tooltip
2009/07/25 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
python 控制语句
2011/11/03 Python
python中字典dict常用操作方法实例总结
2015/04/04 Python
python实现清屏的方法
2015/04/30 Python
python正则表达式之作业计算器
2016/03/18 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
python类的继承实例详解
2017/03/30 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
如何使用PHP session
2015/04/21 面试题
党员岗位承诺书
2014/03/25 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
故宫的导游词
2015/01/31 职场文书
一般纳税人申请报告
2015/05/18 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python