JavaScript词法作用域详解：LHS/RHS查询、eval/with副作用及块级作用域

JavaScript作用域基础

JavaScript采用的并非传统意义上的块级作用域，而是函数作用域机制。

一、作用域基础

JavaScript引擎在执行代码前会先进行编译处理。在此过程中，类似 var a = 2 这样的语句会被拆解为两个独立步骤：

第一步（编译阶段）：var a 在当前作用域内声明一个新变量，这发生在代码实际执行之前。第二步（运行阶段）：a = 2 会执行LHS（左值）查询以定位变量 a 并进行赋值操作。

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。

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

总结而言：ReferenceError 与作用域判定失败相关；而 TypeError 则表示作用域判定成功，但对结果的操作是非法或不合理的。

注：从原理上阐述了博客中《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泄漏到全局作用域上了！

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

注：从原理上阐述了博客《 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）


/* 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词法作用域：从编译原理到eval与with陷阱

JavaScript作用域基础

词法作用域与欺骗机制

函数作用域与块作用域

实用工具推荐