深入理解JS中的變數作用域

2021-08-16 07:22:29 字數 1689 閱讀 1764

變數的作用域有兩種：全域性變數和區域性變數。

全域性變數

最外層函式定義的變數擁有全域性作用域，即對任何內部函式來說，都是可以訪問的：


var n=10;


function f1()


f1(); // 輸出10,說明全域性變數n在函式內部被讀取
區域性變數
區域性變數：在函式內部宣告的變數。函式內部的變數，外部無法讀取。


function f1()


console.log(n); // 沒有定義，說明函式內部的變數，外部無法讀取。
es5中作用域
for(var i =0;i<10;i++)


console.log(i)
js這段**，你覺得會輸出什麼？答案是10，在es5中，只有全域性作用域和函式作用域，並沒有塊作用域，當然我們可以實現塊作用域的功能。看下面**:

(function()


})()


console.log(i)
答案是1，這種寫法叫做立即呼叫函式表示式（iife），這其實就建立了乙個區域性作用域，該作用域宣告的變數只有在該塊內有效，外部訪問不了。這種寫法的好處就是可以做到不汙染全域性變數。

這裡還想再提一點，就是在es5中，變數的宣告問題，在es5中並不是嚴格，你可以直接採用a=10,來宣告乙個全域性變數。 如下：

a=10


;console.log(a)
輸出10，這裡你可以不宣告變數就去使用它，其實js幫你做了一件事。它會執行如下**:

var a=undefined;


a=10


;console.log(a)
那麼我們接下來來一點高階的東西，就是變數提公升。（es5中的概念，es6中新的用法不會出現變數提公升），看**:

a=10;


(function


())();
上面**輸出什麼呢？我們來分析一下：

var a=undefined;


a=10;


(function


())();
理解了變數提公升是什麼意思了吧，其實就是將宣告提到了最前面，所以輸出的是undefined;

es6中的作用域

for(let i=0;i


<10;i++)


console.


log(a)
輸出 a is not defined這裡，而且使用let宣告的變數，在宣告是不可以使用的。

a=3


let a =10


;alert(a)
將會輸出a is not defined,為什麼呢？阮一峰的es6上這樣說，只要塊級作用域內存在let命令，它所宣告的變數就「繫結」（binding）這個區域，不再受外部的影響。es6明確規定，如果區塊中存在let和const命令，這個區塊對這些命令宣告的變數，從一開始就形成了封閉作用域。凡是在宣告之前就使用這些變數，就會報錯。

var a, b;


(function () )();


console.log('window', a);// window undefined


console.log('window', b);// window 0

JS深入理解作用域 作用域鏈，變數提公升

1 作用域 1 全域性作用域 在瀏覽器載入我們html頁面的時候，首先會開闢乙個供js 執行的環境，即全域性作用域，這是乙個棧記憶體 2 私有作用域 函式執行時，開闢乙個新的棧記憶體，形成私有作用域 2 基本資料型別與引用資料型別區別？基本資料型別 string,number,boolean,nul...

深入理解變數 作用域 記憶體

變數這個概念其實說簡單也簡單，說複雜也複雜。特別是再記憶體的角度來理解 1 我們暫且不管堆記憶體和棧記憶體是什麼？我們把房間比作堆記憶體 房間號比作棧記憶體 2 定義 引用型別是堆記憶體中物件 基本型別是棧記憶體簡單資料段 3 這句話如何理解？4 var home 12 這代表房間的門牌號是12 v...

js深入理解之作用域鏈

語法分析,分析3樣東西 第1步 先分析引數 第2步 再分析變數宣告 第3步 分析函式宣告 乙個函式能使用的區域性變數,就從上面的3步分析而來 具體步驟 0 函式執行前的1瞬間,生成 active object 活動物件 下稱ao 1 1.1 函式宣告的引數,形成ao的屬性,值全是undefined,...