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,2
	console.log(a,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詞法作用域的資料請關注我們其它相關文章！