使用默認(rèn)參數(shù)時(shí),參數(shù)會(huì)形成一個(gè)獨(dú)立的作用域,此作用域與函數(shù)體中的作用域是平行關(guān)系
var x = 0;
function foo(x, y = function(){ x = 2; console.log(x); }) {
var x = 3;
y();
console.log(x);
}
foo();
console.log(x);
經(jīng)過測試發(fā)現(xiàn),此段代碼如果使用babel編譯成es5~輸出結(jié)果為 2 2 0
這個(gè)結(jié)果和開頭的結(jié)論并不符合~原因我暫時(shí)將其理解成babel的編譯和原本es6的語法定義還是有點(diǎn)出入的
編譯后的代碼如下:
var x = 0;
function foo(x) {
var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
x = 2;console.log(x);
};
var x = 3;
y();
console.log(x);
}
foo();
console.log(x);
而將es6代碼直接復(fù)制到支持es6語法的瀏覽器中執(zhí)行~得到結(jié)果為:
解釋如下:
參數(shù)y有一默認(rèn)值為一匿名函數(shù),一整個(gè)參數(shù)列表形成一個(gè)獨(dú)立的作用域,在匿名函數(shù)中沒有定義x,故找到了外部的x即第一個(gè)參數(shù)x,然后賦值為2,并輸出,所以第一行輸出2,然后在foo函數(shù)體中聲明了變量x并賦值為3,但此句過后執(zhí)行匿名函數(shù),并沒有影響到foo函數(shù)體中的x最后最后輸出3,這就是我一開始說的參數(shù)形成的獨(dú)立作用域與函數(shù)體中的作用域是平行的匿名函數(shù)中的變量x在沒有聲明的情況下應(yīng)該是沿著作用域鏈往上找而往上找的時(shí)候并不是找到foo函數(shù)體中定義的x而是找到形參列表中的第一個(gè)參數(shù)x,所以匿名函數(shù)中x = 2;這句并沒有修改到foo函數(shù)體中的x的值,由此也證明foo函數(shù)體的作用域和形參列表的獨(dú)立作用于并不是上下級關(guān)系
再來看個(gè)例子:
var x = 0;
function foo(x, y = function(){ console.log(x); x = 2; console.log(x); }) {
x = 3;
y();
console.log(x);
}
foo();
console.log(x);
結(jié)果為:
解釋:
此例foo函數(shù)體中并沒有用var重新聲明變量x,所以此處x就是傳進(jìn)來的參數(shù)x(平時(shí)我們調(diào)用函數(shù)也是這種寫法,至少調(diào)用函數(shù)的時(shí)候不會(huì)在函數(shù)體中對傳進(jìn)來的形參再聲明一邊,不然傳進(jìn)來干嘛~~)匿名函數(shù)中變量x沒有聲明,此處的x就是外層變量x即形參列表中第一個(gè)參數(shù)x,那最后得出3 2 2的結(jié)果也就不難理解了