深入了解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 相关文章推荐
JQuery切换显示的效果实例代码
Feb 27 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
js快速排序的实现代码
Dec 08 Javascript
javascript实现日期按月份加减
May 15 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
js随机生成26个大小写字母
Feb 12 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
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的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
EJB的几种类型
2012/08/15 面试题
final, finally, finalize的区别
2012/03/01 面试题
个人评价范文分享
2014/01/11 职场文书
2014年三八妇女节活动方案
2014/02/28 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
Python实现智慧校园自动评教全新版
2021/06/18 Python
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android