溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了什么是JavaScript詞法作用域，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
JavaScript并不是傳統的塊級作用域，而是函數作用域！
一、作用域
第一步（編譯階段）：var a 在其作用域中聲明新變量。這會在最開始的階段，也就是代碼執行前進行。
第二步（運行階段）：a = 2 會查詢變量a（LHS查詢）并對其進行賦值。
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可以對一段包含一個或多個聲明的“代碼”字符串進行演算，并借此修改已經存在的詞法作用域（運行階段）。
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將對象的屬性當作作用域中的標識符來處理，從而創建了一個新的詞法作用域（運行階段）。
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詞法作用域的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
