JavaScript中變量提升和函數(shù)提升的詳解
第一篇文章中提到了變量的提升,所以今天就來介紹一下變量提升和函數(shù)提升。這個(gè)知識(shí)點(diǎn)可謂是老生常談了,不過其中有些細(xì)節(jié)方面博主很想借此機(jī)會(huì),好好總結(jié)一下。
今天主要介紹以下幾點(diǎn):
1. 變量提升
2. 函數(shù)提升
3. 為什么要進(jìn)行提升
4. 最佳實(shí)踐
那么,我們就開始進(jìn)入主題吧。
1. 變量提升
通常JS引擎會(huì)在正式執(zhí)行之前先進(jìn)行一次預(yù)編譯,在這個(gè)過程中,首先將變量聲明及函數(shù)聲明提升至當(dāng)前作用域的頂端,然后進(jìn)行接下來的處理。(注:當(dāng)前流行的JS引擎大都對源碼進(jìn)行了編譯,由于引擎的不同,編譯形式也會(huì)有所差異,我們這里說的預(yù)編譯和提升其實(shí)是抽象出來的、易于理解的概念)
下面的代碼中,我們在函數(shù)中聲明了一個(gè)變量,不過這個(gè)變量聲明是在if語句塊中:
function hoistVariable() { if (!foo) { var foo = 5; } console.log(foo); // 5 }hoistVariable();
運(yùn)行代碼,我們會(huì)發(fā)現(xiàn)foo的值是5,初學(xué)者可能對此不甚理解,如果外層作用域也存在一個(gè)foo變量,就更加困惑了,該不會(huì)是打印外層作用域中的foo變量吧?答案是:不會(huì),如果當(dāng)前作用域中存在此變量聲明,無論它在什么地方聲明,引用此變量時(shí)就會(huì)在當(dāng)前作用域中查找,不會(huì)去外層作用域了。
那么至于說打印結(jié)果,這要提到預(yù)編譯機(jī)制了,經(jīng)過一次預(yù)編譯之后,上面的代碼邏輯如下:
// 預(yù)編譯之后 function hoistVariable() { var foo; if (!foo) { foo = 5; } console.log(foo); // 5 } hoistVariable();
是的,引擎將變量聲明提升到了函數(shù)頂部,初始值為undefined,自然,if語句塊就會(huì)被執(zhí)行,foo變量賦值為5,下面的打印也就是預(yù)期的結(jié)果了。
類似的,還有下面一個(gè)例子:
var foo = 3; function hoistVariable() { var foo = foo || 5; console.log(foo); // 5 } hoistVariable();
foo || 5這個(gè)表達(dá)式的結(jié)果是5而不是3,雖然外層作用域有個(gè)foo變量,但函數(shù)內(nèi)是不會(huì)去引用的,因?yàn)轭A(yù)編譯之后的代碼邏輯是這樣的:
var foo = 3; // 預(yù)編譯之后 function hoistVariable() { var foo; foo = foo || 5; console.log(foo); // 5 } hoistVariable();
如果當(dāng)前作用域中聲明了多個(gè)同名變量,那么根據(jù)我們的推斷,它們的同一個(gè)標(biāo)識(shí)符會(huì)被提升至作用域頂部,其他部分按順序執(zhí)行,比如下面的代碼:
function hoistVariable() { var foo = 3; { var foo = 5; } console.log(foo); // 5 } hoistVariable();
由于JavaScript沒有塊作用域,只有全局作用域和函數(shù)作用域,所以預(yù)編譯之后的代碼邏輯為:
// 預(yù)編譯之后 function hoistVariable() { var foo; foo = 3; { foo = 5; } console.log(foo); // 5 } hoistVariable();
2. 函數(shù)提升
相信大家對下面這段代碼都不陌生,實(shí)際開發(fā)當(dāng)中也很常見:
function hoistFunction() { foo(); // output: I am hoisted function foo() { console.log('I am hoisted'); } } hoistFunction();
為什么函數(shù)可以在聲明之前就可以調(diào)用,并且跟變量聲明不同的是,它還能得到正確的結(jié)果,其實(shí)引擎是把函數(shù)聲明整個(gè)地提升到了當(dāng)前作用域的頂部,預(yù)編譯之后的代碼邏輯如下:
// 預(yù)編譯之后 function hoistFunction() { function foo() { console.log('I am hoisted'); } foo(); // output: I am hoisted } hoistFunction();
相似的,如果在同一個(gè)作用域中存在多個(gè)同名函數(shù)聲明,后面出現(xiàn)的將會(huì)覆蓋前面的函數(shù)聲明:
function hoistFunction() { function foo() { console.log(1); } foo(); // output: 2 function foo() { console.log(2); } } hoistFunction();
對于函數(shù),除了使用上面的函數(shù)聲明,更多時(shí)候,我們會(huì)使用函數(shù)表達(dá)式,下面是函數(shù)聲明和函數(shù)表達(dá)式的對比:
// 函數(shù)聲明 function foo() { console.log('function declaration'); } // 匿名函數(shù)表達(dá)式 var foo = function() { console.log('anonymous function expression'); }; // 具名函數(shù)表達(dá)式 var foo = function bar() { console.log('named function expression'); };
可以看到,匿名函數(shù)表達(dá)式,其實(shí)是將一個(gè)不帶名字的函數(shù)聲明賦值給了一個(gè)變量,而具名函數(shù)表達(dá)式,則是帶名字的函數(shù)賦值給一個(gè)變量,需要注意到是,這個(gè)函數(shù)名只能在此函數(shù)內(nèi)部使用。我們也看到了,其實(shí)函數(shù)表達(dá)式可以通過變量訪問,所以也存在變量提升同樣的效果。
那么當(dāng)函數(shù)聲明遇到函數(shù)表達(dá)式時(shí),會(huì)有什么樣的結(jié)果呢,先看下面這段代碼:
function hoistFunction() { foo(); // 2 var foo = function() { console.log(1); }; foo(); // 1 function foo() { console.log(2); } foo(); // 1 } hoistFunction();
運(yùn)行后我們會(huì)發(fā)現(xiàn),輸出的結(jié)果依次是2 1 1,為什么會(huì)有這樣的結(jié)果呢?
因?yàn)镴avaScript中的函數(shù)是一等公民,函數(shù)聲明的優(yōu)先級(jí)最高,會(huì)被提升至當(dāng)前作用域最頂端,所以第一次調(diào)用時(shí)實(shí)際執(zhí)行了下面定義的函數(shù)聲明,然后第二次調(diào)用時(shí),由于前面的函數(shù)表達(dá)式與之前的函數(shù)聲明同名,故將其覆蓋,以后的調(diào)用也將會(huì)打印同樣的結(jié)果。上面的過程經(jīng)過預(yù)編譯之后,代碼邏輯如下:
// 預(yù)編譯之后 function hoistFunction() { var foo; foo = function foo() { console.log(2); } foo(); // 2 foo = function() { console.log(1); }; foo(); // 1 foo(); // 1 } hoistFunction();
我們也不難理解,下面的函數(shù)和變量重名時(shí),會(huì)如何執(zhí)行:
var foo = 3; function hoistFunction() { console.log(foo); // function foo() {} foo = 5; console.log(foo); // 5 function foo() {} } hoistFunction(); console.log(foo); // 3
我們可以看到,函數(shù)聲明被提升至作用域最頂端,然后被賦值為5,而外層的變量并沒有被覆蓋,經(jīng)過預(yù)編譯之后,上面代碼的邏輯是這樣的:
// 預(yù)編譯之后 var foo = 3; function hoistFunction() { var foo; foo = function foo() {}; console.log(foo); // function foo() {} foo = 5; console.log(foo); // 5 } hoistFunction(); console.log(foo); // 3
所以,函數(shù)的優(yōu)先權(quán)是最高的,它永遠(yuǎn)被提升至作用域最頂部,然后才是函數(shù)表達(dá)式和變量按順序執(zhí)行,這一點(diǎn)要牢記。
3. 為什么要進(jìn)行提升
關(guān)于為什么進(jìn)行變量提升和函數(shù)提升,這個(gè)問題一直沒有明確的答案,不過最近讀到Dmitry Soshnikov之前的一篇文章時(shí),多少了解了一些,下面是Dmitry Soshnikov早些年的twitter,他也對這個(gè)問題十分感興趣:
然后Jeremy Ashkenas想讓Brendan Eich聊聊這個(gè)話題:
最后,Brendan Eich給出了答案:
大致的意思就是:由于第一代JS虛擬機(jī)中的抽象紕漏導(dǎo)致的,編譯器將變量放到了棧槽內(nèi)并編入索引,然后在(當(dāng)前作用域的)入口處將變量名綁定到了棧槽內(nèi)的變量。(注:這里提到的抽象是計(jì)算機(jī)術(shù)語,是對內(nèi)部發(fā)生的更加復(fù)雜的事情的一種簡化。)
然后,Dmitry Soshnikov又提到了函數(shù)提升,他提到了相互遞歸(就是A函數(shù)內(nèi)會(huì)調(diào)用到B函數(shù),而B函數(shù)也會(huì)調(diào)用到A函數(shù)):
隨后Brendan Eich很熱心的又給出了答案:
Brendan Eich很確定的說,函數(shù)提升就是為了解決相互遞歸的問題,大體上可以解決像ML語言這樣自下而上的順序問題。
這里簡單闡述一下相互遞歸,下面兩個(gè)函數(shù)分別在自己的函數(shù)體內(nèi)調(diào)用了對方:
// 驗(yàn)證偶數(shù) function isEven(n) { if (n === 0) { return true; } return isOdd(n - 1); } console.log(isEven(2)); // true // 驗(yàn)證奇數(shù) function isOdd(n) { if (n === 0) { return false; } return isEven(n - 1); }
如果沒有函數(shù)提升,而是按照自下而上的順序,當(dāng)isEven函數(shù)被調(diào)用時(shí),isOdd函數(shù)還未聲明,所以當(dāng)isEven內(nèi)部無法調(diào)用isOdd函數(shù)。所以Brendan Eich設(shè)計(jì)了函數(shù)提升這一形式,將函數(shù)提升至當(dāng)前作用域的頂部:
// 驗(yàn)證偶數(shù) function isEven(n) { if (n === 0) { return true; } return isOdd(n - 1); } // 驗(yàn)證奇數(shù) function isOdd(n) { if (n === 0) { return false; } return isEven(n - 1); } console.log(isEven(2)); // true
這樣一來,問題就迎刃而解了。
最后,Brendan Eich還對變量提升和函數(shù)提升做了總結(jié):
大概是說,變量提升是人為實(shí)現(xiàn)的問題,而函數(shù)提升在當(dāng)初設(shè)計(jì)時(shí)是有目的的。
至此,關(guān)于變量提升和函數(shù)提升,相信大家已經(jīng)明白其中的真相了。
4. 最佳實(shí)踐
理解變量提升和函數(shù)提升可以使我們更了解這門語言,更好地駕馭它,但是在開發(fā)中,我們不應(yīng)該使用這些技巧,而是要規(guī)范我們的代碼,做到可讀性和可維護(hù)性。
具體的做法是:無論變量還是函數(shù),都必須先聲明后使用。下面舉了簡單的例子:
var name = 'Scott'; var sayHello = function(guest) { console.log(name, 'says hello to', guest); }; var i; var guest; var guests = ['John', 'Tom', 'Jack']; for (i = 0; i < guests.length; i++) { guest = guests[i]; // do something on guest sayHello(guest); }
如果對于新的項(xiàng)目,可以使用let替換var,會(huì)變得更可靠,可維護(hù)性更高:
值得一提的是,ES6中的class聲明也存在提升,不過它和let、const一樣,被約束和限制了,其規(guī)定,如果再聲明位置之前引用,則是不合法的,會(huì)拋出一個(gè)異常。
所以,無論是早期的代碼,還是ES6中的代碼,我們都需要遵循一點(diǎn),先聲明,后使用。
本文完。
參考資料:
http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html
http://dmitrysoshnikov.com/notes/note-4-two-words-about-hoisting/
https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/
http://stackoverflow.com/questions/7506844/javascript-function-scoping-and-hoisting
到此這篇關(guān)于JavaScript中變量提升和函數(shù)提升的詳解的文章就介紹到這了,更多相關(guān)JavaScript 變量提升和函數(shù)提升內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js字符串的各種格式的轉(zhuǎn)換 ToString,F(xiàn)ormat
平時(shí)我們經(jīng)常會(huì)需要將字符轉(zhuǎn)換為各種不同的格式,例如錢:0元需要轉(zhuǎn)換為0.00顯示;需要轉(zhuǎn)換為16進(jìn)制顯示的數(shù),這樣的例子有很多2011-08-08LayUI+Shiro實(shí)現(xiàn)動(dòng)態(tài)菜單并記住菜單收展的示例
這篇文章主要介紹了LayUI+Shiro實(shí)現(xiàn)動(dòng)態(tài)菜單并記住菜單收展的示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05js數(shù)組的基本用法及數(shù)組根據(jù)下標(biāo)(數(shù)值或字符)移除元素
js數(shù)組的用法包括創(chuàng)建、取值賦值、添加以及根據(jù)下標(biāo)(數(shù)值或字符)移除元素等等,在本文將為大家詳細(xì)介紹下,感興趣的朋友可以參考下2013-10-10獲取div編輯框,textarea,input text的光標(biāo)位置 兼容IE,F(xiàn)F和Chrome的方法介紹
獲取div編輯框,textarea,input text的光標(biāo)位置 兼容IE,F(xiàn)F和Chrome的方法介紹,有需求的朋友可以參考2012-11-11