ES6中函数参数默认值为函数的问题？

Question

我对函数参数默认值为函数的情况有许多困惑
比如

let foo = 'outer';

function bar(func = x => foo) {
  let foo = 'inner';
  console.log(func()); 
}

bar(); //outer

根据阮一峰的es6入门，我知道函数参数是默认值的话，会先有个块级作用域包裹参数，初始化结束后块级作用域消失

一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的。

如果默认值是普通变量我能理解，但还是不懂为什么这里输出的是outer而不是inner

Answer 1

把语法糖彻底展开，应该能看清楚点

let foo = 'outer';

function fk_compiler() {
  return foo;
}

function bar(func) {
  if (func === undefined) {
    func = fk_compiler;
  }
  let foo = 'inner';
  console.log(func());
}

bar();

你看，fk_compiler里是不是只能返回外部作用域下的foo？

Answer 2

一句话：函数的闭包在定义时形成，而非运行时。

Answer 3

赋予默认参数的临时作用域并不隶属于函数体内部的作用域呀，所以就会继续向上查找。

Answer 4

js是词法作用域，foo值取函数定义时的值而不是执行时的值。

Answer 5

基于回复者的代码：

let foo = 'outer';

function fk_compiler() {
  return foo;
}

function bar(func) {
  if (func === undefined) {
    func = fk_compiler;
  }
  let foo = 'inner';
  console.log(func());
}

bar();

js采取的是词法作用域，所以，无论函数在哪里被调用，或者以任何形式被调用，其词法作用域只由其被声明时的位置决定。

fk_compiler被声明的作用域在全局，所以，它会去访问全局作用域中的foo。答案也就出来了。

类似代码：

function foo(){
  console.log(this.a);
}
(function init(){
  var a = 'inner';//此处改为 window.a = 'global';再试试
  foo();
})();

Answer 6

如果楼主还在关注这个问题，或者未来有别的同学抱有同样的疑问来到此，我都希望仔细看一下我的回答，提高辨别能力。
es6新增的参数带有默认值时会形成一个作用域。其实这个问题就是怎么理解临时作用域以及临时作用域的初始状态。

看了某些回答的代码解读，我觉得不是很稳妥，如果默认值引用了另一个同名参数，此时应该是调用该参数，而不是外部同名变量。所以我更倾向于把所以参数都放在一个作用域之中，然后包裹函数体。代码如下：

let foo = 'outer';

function bar(func) {
  if (func === undefined) {
      func = function(x) {return foo};
  }
  
  return function(){
      let foo = 'inner';
      console.log(func());
  }.apply(this,arguments)

}

bar();

除此之外，还有一个评论应该是使用自己的总结言论了，很不恰当。词法作用域确实是指作用域在词法解析阶段既确定了，但某些情况下，比如apply、call、with、eval却可以让js产生动态作用域的效果（虽无法改变词法作用域的本质）。

希望对楼主和其他学习的人有所帮助，如果有错误或者不足的地方请直接评论指正，谢谢各位。

Answer 7

这个问题确实非常鸡肋，函数的作用域链是在定义的时候就固定了。如果你非要改变的话，直接通过 call或者 apply 加上 this 来绑定作用域即可。

Answer 8

默认函数func里引用的是外面的变量foo
与函数bar（另一个块级作用域）里的变量foo不是一个

let foo = 'outer'

function bar(func = x => foo) {
  foo = 'inner'
  console.log(func())
}

bar() // inner