深入理解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 终止函数执行操作
Feb 14 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 Javascript
浅谈JavaScript节流和防抖函数
Aug 25 Javascript
Echarts.js无法引入问题解决方案
Oct 30 Javascript
关于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+mysql一个名片库程序
2006/10/09 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
Javascript 按位与赋值运算符 (&=)使用介绍
2014/02/04 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
简单的三步vuex入门
2018/05/20 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
工厂标语大全
2014/10/06 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
行政助理岗位职责
2015/02/10 职场文书
基层工作经历证明
2015/06/19 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
初中数学教学随笔
2015/08/15 职场文书
微信早安问候语
2015/11/10 职场文书
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang