JavaScript并不是傳統(tǒng)的塊級(jí)作用域，而是函數(shù)作用域！

一、作用域

• JavaScript引擎在代碼執(zhí)行前會(huì)對(duì)其進(jìn)行編譯，在這個(gè)過(guò)程中，像var a = 2 這樣的聲明會(huì)被分解成兩個(gè)獨(dú)立的步驟：

第一步（編譯階段）：var a 在其作用域中聲明新變量。這會(huì)在最開始的階段，也就是代碼執(zhí)行前進(jìn)行。
第二步（運(yùn)行階段）：a = 2 會(huì)查詢變量a（LHS查詢）并對(duì)其進(jìn)行賦值。

• LHS & RHS（當(dāng)前作用域->上級(jí)作用域->...->全局作用域）

LHS(左側(cè))：試圖找到變量的容器本身
RHS(右側(cè))：查找某個(gè)變量的值

示例：

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“嚴(yán)格模式”下，LHS拋出ReferenceError；“非嚴(yán)格模式”下，LHS會(huì)自動(dòng)隱式的創(chuàng)建一個(gè)全局變量。

（2）RHS查詢?cè)谒星短椎淖饔糜蛑斜閷げ坏剿璞闅v會(huì)拋出ReferenceError。

（3）RHS查詢到一個(gè)變量，但你嘗試對(duì)其不合理的操作（引用null或undefined類型中的屬性），會(huì)拋出TypeError。

一句話概括之：ReferenceError同作用域判別失敗相關(guān)；而TypeError則代表作用域判別成功了，但是對(duì)結(jié)果的操作是非法或不合理的。

PS：從原理上闡述了博客中《JavaScript函數(shù)及其prototype》函數(shù)執(zhí)行覆蓋等問(wèn)題?。。?/p>

二、詞法作用域

詞法作用域意味著作用域是由書寫代碼時(shí)函數(shù)聲明的位置來(lái)決定的。JavaScript中有兩個(gè)機(jī)制可以“欺騙”詞法作用域：eval(...)和with。

• eval

eval函數(shù)可以接受一個(gè)字符串參數(shù)，并將其中的內(nèi)容視為好像在書寫時(shí)存在于程序中這個(gè)位置的代碼（在當(dāng)前位置，可生成代碼，并運(yùn)行）。
eval可以對(duì)一段包含一個(gè)或多個(gè)聲明的“代碼”字符串進(jìn)行演算，并借此修改已經(jīng)存在的詞法作用域（運(yùn)行階段）。

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獲取到；但非全局的變量如果被覆蓋，就無(wú)法訪問(wèn)到了！
嚴(yán)格模式下：

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通常被當(dāng)作重復(fù)引用一個(gè)對(duì)象中的多個(gè)屬性的快捷方式，可以不需要重復(fù)引用對(duì)象本身。
with將對(duì)象的屬性當(dāng)作作用域中的標(biāo)識(shí)符來(lái)處理，從而創(chuàng)建了一個(gè)新的詞法作用域（運(yùn)行階段）。

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泄漏到全局作用域上了！

這兩個(gè)機(jī)制的副作用是引擎無(wú)法在編譯時(shí)對(duì)作用域查找進(jìn)行優(yōu)化，導(dǎo)致代碼運(yùn)行速度變慢，建議不要使用它們！

PS：從原理上闡述了博客《 JavaScript語(yǔ)言精粹【糟粕、毒瘤】》中with不能使用的原因?。?！

三、函數(shù)作用域和塊作用域

匿名和具名

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

立即執(zhí)行函數(shù)表達(dá)式

/* 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會(huì)創(chuàng)建一個(gè)塊作用域

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 不會(huì)報(bào)錯(cuò)??！
	var bar = 2;
}

ES6中引入新的let關(guān)鍵字?。?/p>

/* 填坑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 報(bào)錯(cuò)?。?
	let bar = 2;
}

推薦兩個(gè)將ES6代碼轉(zhuǎn)化成兼容ES6之前的環(huán)境（大部分是ES5，但不全是）工具：Traceur和let-er

以上就是深入了解JavaScript詞法作用域的詳細(xì)內(nèi)容，更多關(guān)于JavaScript詞法作用域的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論