js引擎在讀取js代碼時會進行兩個步驟,第一個步驟是解釋,第二個步驟是執行。
解釋就是先通篇掃描所有的Js代碼,然后把所有聲明提升到頂端,第二步是執行,執行就是執行代碼的操作。
例:
例子1:
<script type="text/javascript">
console.log(a);//輸出結果 undefined
var a=10;
</script>
以上代碼輸出 undefined
原因: 變量提升(把變量聲明提升到當前執行環境的最頂端)
上段代碼相當於:
var a;
console.log(a);//由於未賦值 所以輸出undefined
a=10;
例2:
foo();
function foo(){
console.log("aaa");
}
結果輸出: aaa
原理:函數聲明提升 (函數聲明提升直接把整個函數提到執行環境的最頂端)
相當於:
function foo(){
console.log("aaa");
}
foo();
變量提升只提升函數名 而函數提升會提升整個函數題 注意:函數提升在變量提升上面。
例3:
foo();
var foo = function(){
console.log("aaa");
}
運行結果是: foo is not a function
原因: 還是進行了變量提升
相當於:
var foo;
console.log(foo); //undefined
foo(); //foo is not a function
foo = function(){
console.log("aaa");
}
上面代碼輸出undefined 是因為變量提升后並沒有賦值因此輸出undefined
輸出foo is not a function 原因是:js解析遇到 foo()時會默認當做函數來解析
例4:
console.log(foo);
var foo=10;
console.log(foo);
function foo(){
console.log(10);
}
console.log(foo);
輸出結果:
相當於:
function foo(){
console.log(10);
}
var foo;
console.log(foo);
foo=10;
console.log(foo);
console.log(foo);
注意: 函數提升在變量提升上面,第一個console.log(foo);為什么會輸出函數體呢,原因在於 var foo; 並未有賦值只是聲明,因此他會調用上面的值。
例如:
var b=10;
b=10;
console.log(b); //10 輸出上一個值不會輸出undefined
但是更改后:
var b=10;
b=20;
console.log(b); //20 輸出20不是上一個值
總結:關於變量提升,一定要注意細心思考一下,還有就是要牢記,函數提升在變量提升之上
---------------------
原文:https://blog.csdn.net/demo_18/article/details/78493489