昨天碰到小伙伴在問js函數提升的問題，雖然知道一點，但感覺自己說不清楚，于是搜了一下，找到一篇說的比較明白的翻譯，參考地址如下：

http://www.cnblogs.com/betarabbit/archive/2012/01/28/2330446.html

?

1、理解js的作用域是函數級作用域。

大學學的C語言，塊級作用域（block-level scope）早已印刻在我嬸嬸的腦海里，所以經常寫出來這樣的代碼：

function setPrice(num){
??? if( num >0 ){
??????? var price = num;
??? }else{
??????? var price = -num;
??? }
}

于是webstorem就給我的兩個var標紅了，那就改改唄，改成了這樣：

function setPrice(num){
??? var price;
??? if( num >0 ){
??????? price = num;
??? }else{
??????? price = -num;
??? }
}

感覺自己好機智，然而這是怎么回事奈？

因為JavaScript是函數級作用域(function-level scope)。

也就是只有函數才會創建新的作用域，函數內的if,else塊公用一個function的作用域。

?

2、說說“變量”提升

叫它們“變量”并不是很合適，目前沒有想出來它們的名字，先暫時這樣寫吧。

在一個函數里可能出現的有下面這幾種“變量”：

（1）語言自身定義(Language-defined): 所有的作用域默認都會包含this和arguments。

（2）函數形參(Formal parameters): 函數有名字的形參會進入到函數體的作用域中。

（3）函數聲明(Function decalrations): 通過function的形式。

（4）變量聲明(Variable declarations): 通過var的形式。(這里需要注意的是，ES6 出現了let這個專門針對塊級區域的變量喲~)

?

以前師傅總讓我把函數里的變量的聲明寫在函數的最上面，一直不明白為什么，也沒有想到過，確實函數的聲明也應該寫在函數的最上面，那么這是為什么奈？

那時因為一個神奇的事情，名叫hoisting（提升），就是說，無論你是函數聲明還是變量聲明都會在js解釋的時候被提升到他們作用域的最頂端。

?

setPrice: function(orginPrice,discount,coupon){
var price;

if(discount){
price = calculateDiscount(orginPrice,discount);

}else{
price = calculateCoupon(orginPrice,discount);
}

function calculateDiscount(price,discount){
return orginPrice * ( 1 - discount);
}

function calculateCoupon(price,coupon){
return orginPrice - coupon;
}

this.down('#price').setData(price);
}

?

這里的calculateDiscount，calculateCoupon的兩個方法寫在了執行語句的下邊，但是并不會影響函數的執行，就是因為函數在解釋時被提升的緣故。

?

需要注意的是聲明的賦值部分并沒有被提升。

也就是說

function aaa(){

??? var a = 0 ;

}

這段函數被解釋后是

function aaa(){

???? var a ;

???? a = 0;

}

?

恩~差不多久是這個樣子啦~

轉載于:https://www.cnblogs.com/jun3101s/p/5598311.html

總結

以上是生活随笔為你收集整理的js hoisting -- 提升 学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。