Javascript的變量提升和函數提升
在JavaScript執行代碼的過程中是一段一段從上往下執行代碼。執行代碼之前是有一個預處理過程的,比如變量的提升和函數提升。
一、變量提升
通常我們會遇到如下的代碼:
console.log(a); //輸出結果:undefined
var a="mr gao";
console.log(a);//輸出結果:mr gao
function demo(){
console.log(a);//輸出結果:undefined
var a="demo";
console.log(a);//輸出結果:demo
}
demo();
其實javascript在預處理過程時,會將聲明的變量提升至對應作用域的頂端;所以上述的代碼類似於:
var a; //變量提升,如果當前作用域有相同的變量名,則會被提升至同一位置。
console.log(a); //輸出結果:undefined
a="mr gao";
console.log(a);//輸出結果:mr gao
function demo(){
var a;
console.log(a);//輸出結果:undefined
a="demo";
console.log(a);//輸出結果:demo
}
demo();
二、函數提升
在搞懂函數提升之前先要了解函數聲明的幾種方式:
//1:函數聲明方式
function funName(){
}
//2:函數表達式
}
var funName=function(){
}
//3:函數對象方式
var funcName=new Function();
只有函數聲明方式採用函數作用域的提升
例子:
(1)變量提升
demo();//結果爲:undefined
var age=20;//這個變量的聲明會提升到變量使用之前
function demo() {
console.log(age);//undefined
var age=30;
}
//代碼解析過程爲
var age;
function demo() {
var age;
console.log(age);
age=30;
}
demo();
age=20;
(2)相同函數名變量提升
function demo(){
console.log("我是第一個函數啊")
}
demo();
function demo(){
console.log("我是第二個函數啊")
}
demo();
//執行結果爲:我是第二個函數啊 我是第二個函數啊
//執行過程爲:
function demo(){//第一個demo函數提升至作用域頂端,第二個同名demo函數也提升至頂端,覆蓋第一個demo函數
console.log("我是第二個函數啊")
}
demo()//調用第一個demo函數
demo()//調用第二個demo函數
(3)函數名和變量名衝突:函數名優先級高(函數優先)
console.log(demo);
var demo="我是變量";
function demo (){
console.log("我是函數");
}
//輸出結果爲:
ƒ demo(){
console.log("我是函數");
}