Javascript的變量提升和函數提升

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("我是函數");

}

原文請見:點擊查看更多文章

參考:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章