深入了解JavaScript词法作用域


Posted in Javascript onJuly 29, 2020

JavaScript并不是传统的块级作用域,而是函数作用域!

一、作用域

  • JavaScript引擎在代码执行前会对其进行编译,在这个过程中,像var a = 2 这样的声明会被分解成两个独立的步骤:

第一步(编译阶段):var a 在其作用域中声明新变量。这会在最开始的阶段,也就是代码执行前进行。
第二步(运行阶段):a = 2 会查询变量a(LHS查询)并对其进行赋值。

  • LHS & RHS(当前作用域->上级作用域->...->全局作用域)

LHS(左侧):试图找到变量的容器本身
RHS(右侧):查找某个变量的值

示例:

function foo(a){
	var b = a;
	return a + b;
}
var c = foo(2);
// LHS(3处):c;a(隐式变量分配);b;
// RHS(4处):foo(2);=a;a;b;
  • 异常
function foo(a){
	console.log(a + b);
	b = a;
}
foo(2);

(1)在ES5“严格模式”下,LHS抛出ReferenceError;“非严格模式”下,LHS会自动隐式的创建一个全局变量。

(2)RHS查询在所有嵌套的作用域中遍寻不到所需遍历会抛出ReferenceError。

(3)RHS查询到一个变量,但你尝试对其不合理的操作(引用null或undefined类型中的属性),会抛出TypeError。

一句话概括之:ReferenceError同作用域判别失败相关;而TypeError则代表作用域判别成功了,但是对结果的操作是非法或不合理的。

PS:从原理上阐述了博客中《JavaScript函数及其prototype》函数执行覆盖等问题!!!

二、词法作用域

词法作用域意味着作用域是由书写代码时函数声明的位置来决定的。JavaScript中有两个机制可以“欺骗”词法作用域:eval(...)和with。

  • eval

eval函数可以接受一个字符串参数,并将其中的内容视为好像在书写时存在于程序中这个位置的代码(在当前位置,可生成代码,并运行)。
eval可以对一段包含一个或多个声明的“代码”字符串进行演算,并借此修改已经存在的词法作用域(运行阶段)。

function foo(str,a){
	eval(str);
	console.log(a, b);			//1 , 3
	console.log(a, window.b);	//1 , 2
}
var b = 2;
foo("var b = 3;", 1);

解释:上述全局变量b被覆盖了,由于b是全局的,可以window.b获取到;但非全局的变量如果被覆盖,就无法访问到了!
严格模式下:

function foo(str,a){
	"use strict";
	eval(str);
	console.log(a, b);			//1 , 2
	console.log(a, window.b);	//1 , 2
}
var b = 2;
foo("var b = 3;", 1);
  • with

with通常被当作重复引用一个对象中的多个属性的快捷方式,可以不需要重复引用对象本身。
with将对象的属性当作作用域中的标识符来处理,从而创建了一个新的词法作用域(运行阶段)。

function foo(obj){
	with(obj){
		a = 2;
	}
}
var o1 = { a : 3 };
var o2 = { b : 3 };

foo(o1);
console.log( o1.a );	// 2

foo(o2);
console.log( o2.a );	// undefined
console.log( a );		// 2,表明a泄漏到全局作用域上了!

这两个机制的副作用是引擎无法在编译时对作用域查找进行优化,导致代码运行速度变慢,建议不要使用它们!

PS:从原理上阐述了博客《 JavaScript语言精粹【糟粕、毒瘤】》中with不能使用的原因!!!

三、函数作用域和块作用域

匿名和具名

/* 匿名(引用自身只能用过期的arguments.callee引用) */
setTimeout(function(){
	console.log("i wait 1 second!")
},1000);
/* 具名(可读性好) */
setTimeout(function timeoutHandler(){
	console.log("i wait 1 seco nd!")
},1000);

立即执行函数表达式

/* IIFE模式 */
var a = 2;
(function IIFE(global){
	var a = 3;
	console.log(a);			//3
	console.log(global.a);	//2
})(window);
/* UMD模式 */
var b = 2;
(function UMD(def){
	def(window);
})(function tmpF(global){
	var b = 3;
	console.log(b);			//3
	console.log(global.b);	//2
});

块作用域

try/catch会创建一个块作用域

try{
	undefined();
}catch(err){
	console.log(err);	//可以正常使用
}
console.log(err);	//ReferenceError: err is not defined

/* 坑1 */
for(var i=0;i<10;i++){}
console.log(i);		//10
/* 坑2 */
{
	console.log(bar);	//undefined 不会报错!!
	var bar = 2;
}

ES6中引入新的let关键字!!

/* 填坑1 */
for(let i=0;i<10;i++){}
console.log(i);		//SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
/* 填坑2 */
{
	console.log(bar);	//SyntaxError 报错!!
	let bar = 2;
}

推荐两个将ES6代码转化成兼容ES6之前的环境(大部分是ES5,但不全是)工具:Traceur和let-er

以上就是深入了解JavaScript词法作用域的详细内容,更多关于JavaScript词法作用域的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
用 javascript 实现的点击复制代码
Mar 24 Javascript
InnerHtml和InnerText的区别分析
Mar 13 Javascript
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
js单词形式的运算符
May 06 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
vue监听dom大小改变案例
Jul 29 #Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 #Javascript
详解JavaScript作用域 闭包
Jul 29 #Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 #Javascript
Vue 监听元素前后变化值实例
Jul 29 #Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 #Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 #Javascript
You might like
php新建文件自动编号的思路与实现
2011/06/27 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
php生成图片验证码
2015/06/09 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
JS版网站风格切换实例代码
2008/10/06 Javascript
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
浅谈MySQL中的触发器
2015/05/05 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
pandas中去除指定字符的实例
2018/05/18 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
Python3的socket使用方法详解
2020/02/18 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
英国在线药房:Express Chemist
2019/03/28 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
运动会闭幕式解说词
2014/02/21 职场文书
消防安全承诺书
2014/05/22 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
小学生思想品德评语
2014/12/31 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL