作用域的理解
變數作用域
全域性變數 擁有全域性作用域,在Javascript程式碼中的任何地方都是有定義的。
然而在 函式內 宣告的變數只在函式體內有定義。它們是區域性變數,作用域是有區域性性的。函式引數也是區域性變數,它們只在函式體內有定義。
函式體內,區域性變數的優先順序高於同名的全域性變數。如果在函式內宣告的一個區域性變數或者函式引數中帶有的變數和全域性變數重名,那麼全域性變數就被區域性變數所覆蓋。
var scope = "global"; //宣告一個全域性變數
function fn() {
var scope = "local"; //宣告一個同名的區域性變數
return scope; //返回區域性變數的值
}
fn(); // "local"
Javascript裡沒有塊級作用域,但是有函式作用域
也就是:變數在宣告它們的函式體 以及 這個函式體巢狀的任意函式體內都是有定義的。
函式定義是可以巢狀的。由於每個函式都有它自己的作用域,因此會出現幾個區域性作用域巢狀的情況
var scope = "global scope"; //全域性變數
function checkscope() {
var scope = "local scope"; //區域性變數
function nested() {
var scope = "nested scope";//巢狀作用域內的區域性變數
return scope; //返回當前作用域內的值
}
return nested();
}
checkscope(); //巢狀作用域
出現了一個坑爹的地方,我之前竟然一直存在這個誤區:就是函式以宣告的方式定義,裡面有各種程式碼,各種執行,但沒什麼鳥用!因為它只會進行:函式宣告提升!!!
真正執行函式內程式碼的時候,是在呼叫該函式的時候!!!
一個坑爹的例項
function fn() {
console.log(n);
}
/*---------------*/
function fn2() {
var n = 3;
fn();
}
/*---------------*/
fn2(); // undefined
var n = 3;
解釋上面這段程式碼:
1.fn、fn2、n 先宣告提升(籠統的說);
2.預編譯(也就是宣告提升)後,程式碼從上到下開始執行,直到執行到 fn2()時,這時n還沒有被賦值
3.從上到下,知道遇到fn2()-->然後進入fn2()-->遇到fn(),發現fn2作用域內沒有fn-->跳轉到 fn 裡面-->fn裡面沒有 n,所以跳到全域性環境中找n,發現 只有一個 var n;所以列印出了undefined;
function fn() {
console.log(n);
}
var n = 1;
/*---------------*/
function fn2() {
var n = 3;
fn();
}
/*---------------*/
fn2(); // 1
這段程式碼 var n=1 是在fn2的上面,所以會被找到,可以參考上面的解釋
還有一點,像if...for...這樣的迴圈語句 是不能構成作用域的。也就是說只要在一個函式體內,迴圈語句裡面的變數,在該函式體內都是可以訪問到的
相關文章
- 理解 JavaScript 作用域JavaScript
- 理解 JavaScript 中的作用域JavaScript
- 理解JavaScript的作用域鏈JavaScript
- 深入理解JavaScript作用域和作用域鏈JavaScript
- JavaScript深度理解——作用域JavaScript
- javascript作用域鏈理解JavaScript
- (譯)理解javascript中的作用域JavaScript
- 深入理解javascript系列(六):作用域與作用域鏈JavaScript
- 深入理解JavaScript作用域JavaScript
- Javascript解析之作用域理解JavaScript
- 理解 Javascript 中變數的作用域JavaScript變數
- 對js中執行環境、作用域和作用域鏈的理解JS
- js基礎梳理-如何理解作用域和作用域鏈?JS
- 理解JavaScript的核心知識點:作用域JavaScript
- 深入理解javascript作用域系列第二篇——詞法作用域和動態作用域JavaScript
- 深入理解 Javascript 之 作用域JavaScript
- js的作用域、作用域鏈JS
- 理解JavaScript中的作用域和上下文JavaScript
- FE.ES-理解ECMA Javascript作用域JavaScript
- 深入理解閉包之前置知識→作用域與詞法作用域
- 深入理解javascript作用域系列第五篇——一張圖理解執行環境和作用域JavaScript
- js的作用域和作用域鏈JS
- js的作用域與作用域鏈JS
- 物件的使用處理,作用域的和ajax中this的理解物件
- JavaScript 作用域 與 作用域鏈JavaScript
- js 作用域和作用域鏈JS
- 深入理解JavaScript的作用域與變數提升(hoisting)JavaScript變數
- JS的作用域JS
- cookie的作用域Cookie
- javascript之作用域與作用域鏈JavaScript
- 為何你始終理解不了JavaScript作用域鏈?JavaScript
- 理解 JS 作用域鏈與執行上下文JS
- 從上下文,到作用域(彩蛋:理解閉包)
- 作用域
- 詞法作用域和動態作用域
- 從這兩道題重新理解,JS的this、作用域、閉包、物件JS物件
- 重讀《深入理解ES6》 —— 塊級作用域
- 深入理解 RxJava2:從 observeOn 到作用域(4)RxJava