深入理解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 相关文章推荐
jquery 插件开发方法小结
Oct 23 Javascript
javascript hashtable 修正版 下载
Dec 30 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
原生JS实现不断变化的标签
May 22 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
vue组件命名和props命名代码详解
Sep 01 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数组交集的优化代码分析
2011/03/06 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
php计算title标题相似比的方法
2015/07/29 PHP
php如何连接sql server
2015/10/16 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
Python实现程序的单一实例用法分析
2015/06/03 Python
Django进阶之CSRF的解决
2018/08/01 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
UNIX文件系统常用命令
2012/05/25 面试题
C++程序员求职信
2014/05/07 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
车间质检员岗位职责
2015/04/08 职场文书
初三化学教学反思
2016/02/22 职场文书
使用JS实现简易计算器
2021/06/14 Javascript
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android