hoisting機(jī)制

javascript的變量聲明具有hoisting機(jī)制，JavaScript引擎在執(zhí)行的時(shí)候，會(huì)把所有變量的聲明都提升到當(dāng)前作用域的最前面。

先看一段代碼

var v = "hello";
(function(){
 console.log(v);
 var v = "world";
})();

這段代碼運(yùn)行的結(jié)果是什么呢？
答案是：undefined
這段代碼說(shuō)明了兩個(gè)問(wèn)題，
第一，function作用域里的變量v遮蓋了上層作用域變量v。代碼做少些變動(dòng)

var v = "hello";
if(true){
 console.log(v);
 var v = "world";
}  

輸出結(jié)果為”hello”,說(shuō)明javascript是沒(méi)有塊級(jí)作用域的。函數(shù)是JavaScript中唯一擁有自身作用域的結(jié)構(gòu)。

第二，在function作用域內(nèi)，變量v的聲明被提升了。所以最初的代碼相當(dāng)于：

var v = "hello";
(function(){
 var v; //declaration hoisting
 console.log(v);
 v = "world";
})();  

聲明、定義與初始化

聲明宣稱(chēng)一個(gè)名字的存在，定義則為這個(gè)名字分配存儲(chǔ)空間，而初始化則是為名字分配的存儲(chǔ)空間賦初值。
用C++來(lái)表述這三個(gè)概念

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

var v;//聲明變量v
v = "hello";//(定義并)初始化變量v
因?yàn)閖avascript為動(dòng)態(tài)語(yǔ)言，其變量并沒(méi)有固定的類(lèi)型，其存儲(chǔ)空間大小會(huì)隨初始化與賦值而變化，所以其變量的“定義”就不像傳統(tǒng)的靜態(tài)語(yǔ)言一樣了，其定義顯得無(wú)關(guān)緊要。

聲明提升

當(dāng)前作用域內(nèi)的聲明都會(huì)提升到作用域的最前面，包括變量和函數(shù)的聲明

(function(){
 var a = "1";
 var f = function(){};
 var b = "2";
 var c = "3";
})();  

 
變量a,f,b,c的聲明會(huì)被提升到函數(shù)作用域的最前面，類(lèi)似如下：

(function(){
 var a,f,b,c;
 a = "1";
 f = function(){};
 b = "2";
 c = "3";
})();

請(qǐng)注意函數(shù)表達(dá)式并沒(méi)有被提升，這也是函數(shù)表達(dá)式與函數(shù)聲明的區(qū)別。進(jìn)一步看二者的區(qū)別：

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

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

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

上面代碼中函數(shù)聲明f2被提升，所以在前面調(diào)用f2是沒(méi)問(wèn)題的。雖然變量f1也被提升，但f1提升后的值為undefined,其真正的初始值是在執(zhí)行到函數(shù)表達(dá)式處被賦予的。所以只有聲明是被提升的。

名字解析順序

javascript中一個(gè)名字(name)以四種方式進(jìn)入作用域(scope)，其優(yōu)先級(jí)順序如下：
1、語(yǔ)言?xún)?nèi)置：所有的作用域中都有 this 和 arguments 關(guān)鍵字
2、形式參數(shù)：函數(shù)的參數(shù)在函數(shù)作用域中都是有效的
3、函數(shù)聲明：形如function foo() {}
4、變量聲明：形如var bar;

名字聲明的優(yōu)先級(jí)如上所示，也就是說(shuō)如果一個(gè)變量的名字與函數(shù)的名字相同，那么函數(shù)的名字會(huì)覆蓋變量的名字，無(wú)論其在代碼中的順序如何。但名字的初始化卻是按其在代碼中書(shū)寫(xiě)的順序進(jìn)行的，不受以上優(yōu)先級(jí)的影響。看代碼：

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

  function foo(){}

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

如果形式參數(shù)中有多個(gè)同名變量，那么最后一個(gè)同名參數(shù)會(huì)覆蓋其他同名參數(shù)，即使最后一個(gè)同名參數(shù)并沒(méi)有定義。

以上的名字解析優(yōu)先級(jí)存在例外，比如可以覆蓋語(yǔ)言?xún)?nèi)置的名字arguments。

命名函數(shù)表達(dá)式

可以像函數(shù)聲明一樣為函數(shù)表達(dá)式指定一個(gè)名字，但這并不會(huì)使函數(shù)表達(dá)式成為函數(shù)聲明。命名函數(shù)表達(dá)式的名字不會(huì)進(jìn)入名字空間，也不會(huì)被提升。

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
命名函數(shù)表達(dá)式的名字只在該函數(shù)的作用域內(nèi)部有效。

再來(lái)看看下面例子：

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

以上代碼很顯然會(huì)輸出 "my global var"，但是如果我們把以上代碼按如下方式稍加修改：

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

執(zhí)行結(jié)果是輸出了一個(gè) undefined，出現(xiàn)這個(gè)結(jié)果的原因就是變量的聲明被提升了，以上代碼等同如下：

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

被提升的僅僅是變量的聲明部分，并沒(méi)有立即初始化，所以會(huì)輸出 undefined。

然而這種提升機(jī)制，不僅僅表現(xiàn)于在普通的變量，同時(shí)也表現(xiàn)在函數(shù)上。例如下面這段代碼并不能被正確執(zhí)行：

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

因?yàn)樗葍r(jià)于：

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

因?yàn)楹瘮?shù)的聲明同樣被提升而沒(méi)有立即初始化，所以會(huì)出錯(cuò)。

當(dāng)然，這種定義函數(shù)的方式稱(chēng)之為“函數(shù)表達(dá)式”，會(huì)有提升機(jī)制，如果是如下的這種“函數(shù)聲明”方式，則完全沒(méi)有提升機(jī)制方面的問(wèn)題：

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

這也是函數(shù)聲明與函數(shù)表達(dá)式的主要區(qū)別。

最新評(píng)論