JavaScript詞法範圍（你不知道的JavaScript）

標籤：javascript   javascript範圍   你不知道的javascript   es6轉化工具   

JavaScript並不是傳統的塊級範圍，而是函數範圍！
一、範圍1. JavaScript引擎在代碼執行前會對其進行編譯，在這個過程中，像var a = 2 這樣的聲明會被分解成兩個獨立的步驟：
第一步（編譯階段）：var a 在其範圍中聲明新變數。這會在最開始的階段，也就是代碼執行前進行。
第二步（運行階段）：a = 2 會查詢變數a（LHS查詢）並對其進行賦值。
2. 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；

3. 異常

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。
1. eval
eval函數可以接受一個字串參數，並將其中的內容視為好像在書寫時存在於程式中這個位置的代碼（在當前位置，可產生代碼，並運行）。
eval可以對一段包含一個或多個聲明的“代碼”字串進行演算，並藉此修改已經存在的詞法範圍（運行階段）。

function foo(str,a){eval(str);console.log(a, b);//1 , 3console.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 , 2console.log(a, window.b);//1 , 2}var b = 2;foo("var b = 3;", 1);

2. with
with通常被當作重複引用一個對象中的多個屬性的捷徑，可以不需要重複引用對象本身。
with將對象的屬性當作範圍中的標識符來處理，從而建立了一個新的詞法範圍（運行階段）。

function foo(obj){with(obj){a = 2;}}var o1 = { a : 3 };var o2 = { b : 3 };foo(o1);console.log( o1.a );// 2foo(o2);console.log( o2.a );// undefinedconsole.log( a );// 2，表明a泄漏到全域範圍上了！

這兩個機制的副作用是引擎無法在編譯時間對範圍尋找進行最佳化，導致代碼運行速度變慢，建議不要使用它們！
PS：從原理上闡述了部落格《 JavaScript語言精粹【糟粕、毒瘤】》中with不能使用的原因！！！ 
三、函數範圍和塊範圍1. 匿名和具名

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

2. 立即執行函數運算式

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

3. 塊範圍
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）