js基礎知識 你不知道的變數提升的坑

cynthiazha發表於2018-07-05
JS變數

以前一直認為if語句中的變數是不會發生變數提升的，尤其是if條件中判斷語句為false的情況下，今天發生的事情卻讓我蒙了

<script type="text/javascript">
var a = 2;
console.log(fun)
if(a > 3){
    function fun(){console.log('22')}
}
</script>
複製程式碼

在chrome控制檯中列印undefined，而在safrai中列印的卻是fun這個函式體， 在chrome只是將fun這個函式名提升到了外面，相當於var fun；而在safari中卻是將整個函式提升到了外面(在ie8中測試也是) 所以我們在後面執行這個fun()：

var a = 2;
console.log(fun)
if(a > 3){
    function fun(){console.log('22')}
}
fun()
複製程式碼

根據上面的分析結果，在chrome中會報錯提示這個fun is not a function，在safrai中則會執行fun，列印22。 但是並不是無限制的提升（只要定義在if語句內容的所有變數和函式都會提升）

var a = 2;
console.log(fun);
console.log(inner)
if(a > 3){
    function fun(){
        console.log('22')
        var inner = 100
    }
}
fun()
複製程式碼

這時開啟瀏覽器檢視，chrome和safari統一了，都會報錯，提示找不到inner這個變數。所以if語句中發生變數提升也不是毫無底線的，只會發生在第一層。
最後來練習一下下面這道題目：

function test(){alert(22)};
(function(){
	if(false){
		function test(){alert(11)}
	}
	test();
})();
複製程式碼

根據之前的總結在chrome中會提升一個變數會test，所以後面執行這個test()會報錯（因為立即執行函式這個作用域中有test，所以他就不會在往上找全域性的test），因為test不是一個方法，而在IE8、safari中則會列印11（不管if有沒有執行都是將這個test方法提升到外面）

坑真多呀…………:-(

（由於電腦上只安裝了chrome和safari這兩個瀏覽器，所以只做了這兩個瀏覽器測試。）

相關文章