要理解javascript的變量聲明和函數(shù)提升讯嫂,重要的是理解瀏覽器對(duì)javascript代碼的處理過(guò)程瑰步。
包括變量和函數(shù)在內(nèi)的聲明都會(huì)在代碼被執(zhí)行時(shí)被先處理。
例子:
在編輯器中寫(xiě):var a = 1;
瀏覽器處理過(guò)程是:(先聲明變量)var a掉分;(再變量賦值)a = 1;
1.變量的提升:
例子:
function test(){
a = 2;
var a;
console.log(a) //2
}
實(shí)際瀏覽器處理過(guò)程:
function test(){
var a;
a = 2;
console.log(a) //2
}
例子2:
function test(){
console.log(a)
a = 2;
var a ;
}
實(shí)際瀏覽器處理過(guò)程:
function(){
var a;
console.log(a) //undefined 因?yàn)閍還沒(méi)有被賦值
a = 2禽额;
}
2.函數(shù)聲明提升:
函數(shù)聲明的提升優(yōu)先大于變量的提升,同樣這樣的聲明的時(shí)候弄息,不論先后順序痊班,函數(shù)的聲明都會(huì)覆蓋變量的聲明
例子1:
var a = 1;
function f(){
console.log(a);
var a = 2;
console.log(a);
} f();
實(shí)際瀏覽器處理過(guò)程:
var a;
a = 1;
function f(){
var a ;
console.log(a)
//由于a在第一個(gè)console.log(a)語(yǔ)句之前就已經(jīng)定義了,但是并沒(méi)有賦值摹量,因此此時(shí)a的指是undefined
a = 2;
console.log(a)
// 第二個(gè)console.log(a)語(yǔ)句之前,a已經(jīng)完成賦值為2馒胆,所以輸出的結(jié)果是2
}
例子2:
函數(shù)聲明語(yǔ)法:
f("hello");
function f(a){
console.log(a)//hello
}
函數(shù)表達(dá)語(yǔ)法:
f("hello");
var f = function (a){
console.log(a)//會(huì)報(bào)錯(cuò)缨称。f is not function
}
為什么會(huì)報(bào)錯(cuò),理解下瀏覽器處理過(guò)程:
var f祝迂;
f("hello");//報(bào)錯(cuò)睦尽,f雖然被定義了,但是沒(méi)有被賦值所以會(huì)出現(xiàn)f is not function型雳,如果把它放在最后就能執(zhí)行成功
f = function (a){
console.log(a)
}
例子3:
getName();
var getName = function(){
console.log("小明");
}
function getName(){
console.log("大明");
}
getName();
我們來(lái)解析一下例子3瀏覽器是如何處理的:
var getName;//首先變量被提升到頂部当凡,定義未被賦值
function getName(){//函數(shù)聲明也被被提升到頂部
console.log("大明")
}
getName();//調(diào)用函數(shù)聲明,打印“大明”
getName = function() {//變量賦值
console.log("小明")
}
getName() //調(diào)用函數(shù)纠俭,頂部的函數(shù)聲明又被函數(shù)表達(dá)式的賦值操作給覆蓋了沿量,所以輸出小明。
如有錯(cuò)誤請(qǐng)指正冤荆,省得誤人子弟