javascript - 函數(shù)設(shè)置參數(shù)默認值的問題
問題描述
var x = 1; function foo(x,y=function(){x=2;}){ var x = 3; y(); console.log(x); }foo();
這段代碼出現(xiàn)在阮一峰老師寫的es6那本書,最后輸出3,文字說明說y中的x和var x = 3;的x不是同一個x,這兒有點不理解。然后把var x= 3 的var去掉,就能輸出2,更不理解了。。。希望能有解答
問題解答
回答1:這里其實是涉及到 ES6 默認參數(shù)引入的一個中間作用域。這個問題當(dāng)初阮一峰也弄錯過,當(dāng)然這里是正確的。
中間作用域的目的就是防止默認參數(shù)被函數(shù)里面的變量污染。默認參數(shù)本意是為了讓參數(shù)有默認值,假如函數(shù)內(nèi)部的變量還能提升上來,那么默認參數(shù)就沒意義了。具體的解釋和例子可以看文章。
所以看回問題,
var x = 1; function foo (x2, y = function () { x = 2; }) { var x = 3; y(); console.log(x); }foo();
這里有三個作用域,把 x 由外到里標記出來就是:
var x1 = 1; function foo (x2, y = function () { x2 = 2; console.log(x2); }) { var x3 = 3; y(); console.log(x3); }foo();console.log(x1);
假如沒有了參數(shù)的 x,那么標記出來就是:
var x1 = 1; function foo (y = function () { x1 = 2; console.log(x1); }) { var x2 = 3; y(); console.log(x2); }foo();console.log(x1);回答2:
y()修改的是foo函數(shù)的參數(shù)x,并非全局x。(這里你可以在y()調(diào)用后,console.log(x),可發(fā)現(xiàn)全局x還是1.) 問題就簡單了: 1) 當(dāng)用var x = 3時,foo里面的console.log(x)打印的就是foo里的局部變量x,y()修改的只是參數(shù)x,所以最終輸出是局部變量x = 32)當(dāng)不用var時,foo里的所有x都指向參數(shù)x,而用y()把參數(shù)x修改為2,最終輸出2
回答3:y 的默認值改變的是全局變量的x;把var x= 3 的var去掉,就能輸出2 是因為在foo的作用域內(nèi)找不到x,所以在往上尋找,找到全局變量x,此時已被賦值為2
回答4:這是局部變量和全局變量生命周期的區(qū)別,方法里面的var x = 3;是局部變量,兩個變量同名,方法體里面會使用局部變量,不會使用全局變量,所以輸出的是var x = 3;這個x的值;當(dāng)你去掉var x = 3;的var,說明在方法里面沒有另外定義局部變量,使用的是全局變量x,而你方法參數(shù)又把這個全局變量值修改為2,所以輸出為2;
回答5:首先你要理解var操作符的定義,用var操作符定義的變量將成為定義該變量的作用域中的局部變量,也就是說,如果在函數(shù)中使用var定義一個變量,那么這個變量屬于函數(shù)的一個局部變量,在函數(shù)退出時即被銷毀,而不使用var直接定義的變量都將成為全局變量。另一個你要理解的概念是作用域鏈的問題,程序查找一個變量時,首先會在當(dāng)前作用域內(nèi)查找,若沒有找到則順著作用域鏈依次向上查找,遍歷完都沒有則報undefined。回到上面的代碼,首先在全局作用域中利用var定義 x=1; x 即屬于全局變量,接下來在函數(shù)foo內(nèi)部定義了局部變量var x=3;X就屬于函數(shù)的局部變量,接著執(zhí)行y函數(shù),對全局變量x進行修改賦值,這時x變?yōu)?,記住此時修改的是全局變量x而不是局部變量X,接下來打印x時,函數(shù)會依據(jù)作用域鏈先在函數(shù)內(nèi)部查找x的值,找到x=3后即輸出值,所以結(jié)果為3,若把var x=3的var去掉,則x變?yōu)槿肿兞浚薷膞就如同y函數(shù)中x賦值一樣,這時只存在一個全局變量x,按照代碼執(zhí)行順序,內(nèi)部先修改全局變量X為3,然后y函數(shù)修改全局變量x為2,打印時,順著作用域鏈,在函數(shù)內(nèi)部沒有找到x值,則接著在全局作用域中查找,此時X為2,所以結(jié)果為2
回答6:var x = 1;function foo(x, y = function () { x = 2; }) { var x = 3; eval(`(${y.toString()})()`); console.log(x);}foo();回答7:
相關(guān)文章:
1. javascript - h5 video層級太高導(dǎo)致浮在div上面,如何解決?2. javascript - vue中自定義事件如何傳遞參數(shù)?3. mysql - 記得以前在哪里看過一個估算時間的網(wǎng)站4. html5 - video ios不能播放怎么辦?5. python中怎么對列表以區(qū)間進行統(tǒng)計?6. 如何合并兩張具有相同結(jié)構(gòu)的mysql表7. javascript - Ajax加載Json時,移動端頁面向左上角縮小一截兒,加載完成后才正常顯示,這該如何解決?8. javascript - 如何獲取未來元素的父元素在頁面中所有相同元素中是第幾個?9. javascript - 圖片無法正常加載10. mysql ER_BAD_DB_ERROR: Unknown database ’test’
