刚刚看阮一峰的ES6文章时,产生了一个疑问,关于函数参数默认值作用域的。

Question

第一段: var x = 3

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

foo() // 3
x // 1

第二段: x = 3

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

foo() // 2
x // 1

针对这种不同,阮老师给出的解释是这样的:

大家是如何理解第一种情况的?

参考地址:

ECMAScript 6 入门

Answer 1

参数自己整体是一个“块”，仅此而已。你通过断点单步搞明白代码执行的流程，剩下的就是 闭包行为 ，变量名“逐级向上”，直到 global 。扯那么多没用的 ……

debugger;
var x = 1;
var a = 999;
function foo(x,
             y =
               function() {
                 debugger;
                 console.log(x)  // 12
                 x = 22;
                 console.log(a) // 999
                 a = 8;
                 console.log(a) // 8
                 z = 123;
                 return function(){ return x }
               }
               )
{
  debugger;
  var x = 3;
  var a = 0;
  var f = y();
  console.log(f()); // 22
  console.log(x);  // 3
}

foo(12)
console.log(x) // 1
console.log(a) // 8
console.log(global.z) // 123

Answer 2

这相当于有3个上下文对应3个作用域，

全局上下文 ----- > 行参上下文 ----- > 函数内部的局部上下文。

第一种情况，当执行 y();相当于在 行参上下文对应的作用域中执行 ，不会影响 函数内部的局部上下文对应的作用域，所以 x还是3。

Answer 3

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

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

foo() // 3
x // 1
比较打个断点；看一下函数的执行过程；就明白了

Answer 4

你可以把他想象成有三个作用域：
第一次声明是在全局的，第二次在函数参数中声明相当于执行了一次let x和let y =...;第三次是在函数内部中，如果再一次使用了var对x进行声明，那么和参数中的x就不是一个变量，如果没有进行声明，则会沿着作用去找上级的x，这里就找到了函数参数中的x；

var x = 1;
function foo(x, y = function() { x = 2; }) { // 相当于 {let x; let y = function () { x = 2}}
  var x = 3;    // 再次声明x，此时x已经不是参数中的x
  y();
  console.log(x);
}

foo() // 3
x // 1

var x = 1;
function foo(x, y = function() { x = 2; }) { // 相当于 {let x; let y = function () { x = 2}}
  x = 3;    // 沿着作用域链找到参数中的x，则参数中的 y = function () { x = 2} 与这里的x与参数的x是同一个变量
  y();
  console.log(x);
}

foo() // 2
x // 1

Answer 5

我也想不明白这一点，楼主懂了吗？可以解释一下不？？