您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了什么是JavaScript詞法作用域,內(nèi)容簡而易懂,希望大家可以學(xué)習(xí)一下,學(xué)習(xí)完之后肯定會有收獲的,下面讓小編帶大家一起來看看吧。
JavaScript并不是傳統(tǒng)的塊級作用域,而是函數(shù)作用域!
一、作用域
第一步(編譯階段):var a 在其作用域中聲明新變量。這會在最開始的階段,也就是代碼執(zhí)行前進(jìn)行。
第二步(運行階段):a = 2 會查詢變量a(LHS查詢)并對其進(jìn)行賦值。
LHS(左側(cè)):試圖找到變量的容器本身
RHS(右側(cè)):查找某個變量的值
示例:
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會自動隱式的創(chuàng)建一個全局變量。
(2)RHS查詢在所有嵌套的作用域中遍尋不到所需遍歷會拋出ReferenceError。
(3)RHS查詢到一個變量,但你嘗試對其不合理的操作(引用null或undefined類型中的屬性),會拋出TypeError。
一句話概括之:ReferenceError同作用域判別失敗相關(guān);而TypeError則代表作用域判別成功了,但是對結(jié)果的操作是非法或不合理的。
PS:從原理上闡述了博客中《JavaScript函數(shù)及其prototype》函數(shù)執(zhí)行覆蓋等問題?。?!
二、詞法作用域
詞法作用域意味著作用域是由書寫代碼時函數(shù)聲明的位置來決定的。JavaScript中有兩個機制可以“欺騙”詞法作用域:eval(...)和with。
eval函數(shù)可以接受一個字符串參數(shù),并將其中的內(nèi)容視為好像在書寫時存在于程序中這個位置的代碼(在當(dāng)前位置,可生成代碼,并運行)。
eval可以對一段包含一個或多個聲明的“代碼”字符串進(jìn)行演算,并借此修改已經(jīng)存在的詞法作用域(運行階段)。
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獲取到;但非全局的變量如果被覆蓋,就無法訪問到了!
嚴(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通常被當(dāng)作重復(fù)引用一個對象中的多個屬性的快捷方式,可以不需要重復(fù)引用對象本身。
with將對象的屬性當(dāng)作作用域中的標(biāo)識符來處理,從而創(chuàng)建了一個新的詞法作用域(運行階段)。
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泄漏到全局作用域上了!
這兩個機制的副作用是引擎無法在編譯時對作用域查找進(jìn)行優(yōu)化,導(dǎo)致代碼運行速度變慢,建議不要使用它們!
PS:從原理上闡述了博客《 JavaScript語言精粹【糟粕、毒瘤】》中with不能使用的原因!?。?/p>
三、函數(shù)作用域和塊作用域
匿名和具名
/* 匿名(引用自身只能用過期的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會創(chuàng)建一個塊作用域
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關(guān)鍵字!!
/* 填坑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代碼轉(zhuǎn)化成兼容ES6之前的環(huán)境(大部分是ES5,但不全是)工具:Traceur和let-er
以上就是關(guān)于什么是JavaScript詞法作用域的內(nèi)容,如果你們有學(xué)習(xí)到知識或者技能,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。