問題描述

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，這兒有點(diǎn)不理解。然后把var x= 3 的var去掉，就能輸出2，更不理解了。。。希望能有解答

問題解答

這里其實(shí)是涉及到 ES6 默認(rèn)參數(shù)引入的一個中間作用域。這個問題當(dāng)初阮一峰也弄錯過，當(dāng)然這里是正確的。

中間作用域的目的就是防止默認(rèn)參數(shù)被函數(shù)里面的變量污染。默認(rèn)參數(shù)本意是為了讓參數(shù)有默認(rèn)值，假如函數(shù)內(nèi)部的變量還能提升上來，那么默認(rèn)參數(shù)就沒意義了。具體的解釋和例子可以看文章。

所以看回問題，

var x = 1; function foo (x2, y = function () { x = 2; }) { var x = 3; y(); console.log(x); }foo();

這里有三個作用域，把 x 由外到里標(biāo)記出來就是：

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，那么標(biāo)記出來就是：

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

y 的默認(rèn)值改變的是全局變量的x；把var x= 3 的var去掉，就能輸出2 是因?yàn)樵趂oo的作用域內(nèi)找不到x，所以在往上尋找，找到全局變量x，此時已被賦值為2

這是局部變量和全局變量生命周期的區(qū)別，方法里面的var x = 3;是局部變量，兩個變量同名，方法體里面會使用局部變量，不會使用全局變量，所以輸出的是var x = 3；這個x的值；當(dāng)你去掉var x = 3;的var，說明在方法里面沒有另外定義局部變量，使用的是全局變量x，而你方法參數(shù)又把這個全局變量值修改為2，所以輸出為2；

首先你要理解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進(jìn)行修改賦值，這時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

var x = 1;function foo(x, y = function () { x = 2; }) { var x = 3; eval(`(${y.toString()})()`); console.log(x);}foo();回答7：