为什么增加了形参后两段代码的输出结果不一样？

Question

第一段代码：

var a = 1;
function fn2(a) {
  arguments[0] = 20;
  var a = 22;
  console.log(a);
  console.log(arguments[0]);
}
fn2(a);

第二段代码：

var a = 1;

function fn2(a, b = 100) {
  arguments[0] = 20;
  var a = 22;
  console.log(a);
  console.log(arguments[0]);
}
fn2(a);

第一段代码最后输出22和22，这个还是可以理解的，因为a和arguments[0]是同一个东西，但是第二段代码，额外加了一个形参后，结果就不一样了，打印的是22和20。我在MDN查到：

但是MDN的例子和上面的问题不太一样，MDN里面是a有默认值，而a就是arguments[0]。上面的问题中，是b有默认值，而arguments[0]是b而不是a，也就是说，这里是形参b有默认值，那么形参b有默认值为什么会影响到arguments[0]对形参a的跟踪呢？如果说arguments[1]对形参b的跟踪我还能理解，因为arguments[1]就是形参b。但是b影响a，就很疑惑了。

Answer 1

有默认值的函数中的 arguments 和函数的参数不在是同一个引用，而是两个，只不过他们的初始值一样。

而且还有如下的规则:

1. 如果函数的默认参数在参数列表最后，那么 arguments 中参数是没有的
2. 箭头函数没有 arguments 对象
3. 严格模式不能使用 arguments 对象

所以在 ES6 中，最好不要用 arguments 用 ...rest 来代替