一個常見的函數(shù)聲明和變量的面試題
題目一:
(function() {
fn();
var fn = function() {
alert(1)
}
fn();
function fn() {
alert(2)
}
})()
題目二:
function test(age) {
console.log(age);
var age = 27;
console.log(age);
var age = function() {};
console.log(age)
}
test(3);
想回答出來上面的面試題來米苹,先要理解js中函數(shù)聲明提升稚字、變量聲明提升和形參的優(yōu)先級雕崩。如果有知道這三者的關(guān)系的秘噪,就可以退出該文章了狸吞。
bae137f8a4744feb9fe2218f640d99d4.jpeg
(function() {
fn();
var fn = function() {
alert(1)
}
fn();
function fn() {
alert(2)
}
})()
// 上面的代碼通過 js解析后就會變成
(function() {
function fn() {
alert(2)
}
var fn;
fn();
fn = function() {
alert(1)
}
fn();
})()
// 所以運(yùn)行的結(jié)果是 2 1
事實(shí)上,js 的解析是分為兩個階段的,預(yù)編譯和執(zhí)行期
- 預(yù)編譯期間:對本代碼塊中的所有 聲明變量 和 函數(shù) 進(jìn)行處理(類似于 C語言的編譯) 捷绒,但需要注意瑰排,
1.此時處理函數(shù)的只是 聲明式函數(shù)
2.變量也只是進(jìn)行了聲明但是沒有進(jìn)行初始化和賦值 - 執(zhí)行期間:從上到下編譯執(zhí)行代碼塊
f(); // 我是函數(shù)聲明
function f() {
console.log('我是函數(shù)聲明');
}
var f = function() {
console.log('我是變量賦值型函數(shù)');
}
從上面的代碼中,就可以不難看出 ### 函數(shù)聲明的優(yōu)先級 高于 變量聲明的優(yōu)先級