首頁 > web前端 > js教程 > 深入解讀JavaScript中的Hoisting機制_基礎知識

深入解讀JavaScript中的Hoisting機制_基礎知識

WBOY
發布: 2016-05-16 15:45:40
原創
1067 人瀏覽過

hoisting機制

javascript的變數宣告具有hoisting機制,JavaScript引擎在執行的時候,會把所有變數的宣告都提升到目前作用域的最前面。

先看一段程式碼

var v = "hello";
(function(){
 console.log(v);
 var v = "world";
})();
登入後複製

這段程式碼運行的結果是什麼?
答案是:undefined
這段程式碼說明了兩個問題,
第一,function作用域裡的變數v遮蓋了上層作用域變數v。程式碼做少一點變

var v = "hello";
if(true){
 console.log(v);
 var v = "world";
}  
登入後複製

輸出結果為”hello”,說明javascript是沒有區塊級作用域的。函數是JavaScript中唯一擁有自身作用域的結構。

第二,在function作用域內,變數v的宣告被提升了。所以最初的程式碼相當於:

var v = "hello";
(function(){
 var v; //declaration hoisting
 console.log(v);
 v = "world";
})();  
登入後複製

宣告、定義與初始化

聲明宣稱一個名字的存在,定義則為這個名字分配儲存空間,而初始化則是為名字分配的儲存空間賦初值。
用C 來表達這三個概念

extern int i;//這是聲明,表明名字i在某處已經存在了
int i;//這是聲明並定義名字i,為i分配儲存空間
i = 0;//這是初始化名字i,為其賦初值為0
javascript中則是這樣

var v;//宣告變數v
v = "hello";//(定義並)初始化變數v
因為javascript為動態語言,其變數並沒有固定的類型,其儲存空間大小會隨初始化與賦值而變化,所以其變數的「定義」就不像傳統的靜態語言一樣了,其定義顯得無關緊要。

聲明提升

目前作用域內的宣告都會提升到作用域的最前面,包含變數和函數的宣告

(function(){
 var a = "1";
 var f = function(){};
 var b = "2";
 var c = "3";
})();  
登入後複製

 
變數a,f,b,c的宣告會被提升到函數作用域的最前面,類似如下:

(function(){
 var a,f,b,c;
 a = "1";
 f = function(){};
 b = "2";
 c = "3";
})();
登入後複製

請注意函數表達式並沒有被提升,這也是函數表達式與函數宣告的區別。進一步看二者的區別:

(function(){
 //var f1,function f2(){}; //hoisting,被隐式提升的声明

 f1(); //ReferenceError: f1 is not defined
 f2();

 var f1 = function(){};
 function f2(){}
})();  

登入後複製

上面程式碼中函數宣告f2被提升,所以在前面呼叫f2是沒問題的。雖然變數f1也被提升,但f1提升後的值為undefined,其真正的初始值是在執行到函數表達式處被賦予的。所以只有聲明是被提升的。

名字解析順序

javascript中一個名字(name)以四種方式進入作用域(scope),其優先順序如下:
1.語言內建:所有的作用域都有 this 和 arguments 關鍵字
2.形式參數:函數的參數在函數作用域中都是有效的
3.函數宣告:形如function foo() {}
4.變數宣告:形如var bar;

名字宣告的優先順序如上所示,也就是說如果一個變數的名字與函數的名字相同,那麼函數的名字會覆蓋變數的名字,無論其在程式碼中的順序為何。但名字的初始化卻是按其在程式碼中書寫的順序進行的,不受以上優先順序的影響。看代碼:

(function(){
  var foo;
  console.log(typeof foo); //function

  function foo(){}

  foo = "foo";
  console.log(typeof foo); //string
})();  

登入後複製

如果形式參數中有多個同名變量,那麼最後一個同名參數會覆寫其他同名參數,即使最後一個同名參數並沒有定義。

以上的名字解析優先權存在例外,例如可以覆蓋語言內建的名字arguments。

命名函數表達式

可以像函數宣告一樣為函數表達式指定一個名字,但這並不會使函數表達式成為函數宣告。命名函數表達式的名字不會進入名字空間,也不會被提升。

f();//TypeError: f is not a function
foo();//ReferenceError: foo is not defined
var f = function foo(){console.log(typeof foo);};
f();//function
foo();//ReferenceError: foo is not defined
命名函數表達式的名字只在該函數的作用域內部有效。

再來看看下面範例:

var myval = "my global var";
(function() {
 console.log(myval); // log "my global var"
})();

登入後複製

以上程式碼很明顯會輸出 "my global var",但如果我們把以上程式碼按如下方式稍加修改:

var myval = "my global var";
(function() {
 console.log(myval); // log "undefined"
 var myval = "my local var";
})();

登入後複製

執行結果是輸出了一個 undefined,出現這個結果的原因就是變數的宣告被提升了,以上程式碼等同如下:

var myval = "my global var";
(function() {
 var myval;
 console.log(myval); // log "undefined"
 myval = "my local var";
})();

登入後複製

被提升的只是變數的宣告部分,並沒有立即初始化,所以會輸出 undefined。

然而這種提升機制,不僅表現於在普通的變量,同時也表現在函數上。例如下面這段程式碼並不能被正確執行:

(function() {
 fun(); // Uncaught TypeError: undefined is not a function
 var fun = function() {
 console.log("Hello!");
 }
})();

登入後複製

因為它等價於:

(function() {
 var fun;
 fun(); // Uncaught TypeError: undefined is not a function
 fun = function() {
 console.log("Hello!");
 }
})();

登入後複製

因為函數的宣告同樣被提升而沒有立即初始化,所以會出錯。

當然,這種定義函數的方式稱之為“函數表達式”,會有提升機制,如果是如下的這種“函數聲明”方式,則完全沒有提升機制方面的問題:

(function() {
 fun();
 function fun() {
 console.log("Hello!"); // log "Hello!"
 }
})();

登入後複製

這也是函數宣告與函數表達式的主要差異。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板