看似简单的题，席卷几十个前端群，王红元老师都亲自出面解答

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。

首先说明这不是标题党，是真的，这道题席卷了几十个群，能回答出来的人是微乎其微，最后连王红元老师都亲自出面解答了这道题。

题目

先来看看这道题长什么样吧

var x = 1;
function f(x, y = function () { x = 3; console.log(x); }) {
  console.log(x)
  var x = 2
  y()
  console.log(x)
}
f()
console.log(x)
// //1、上面的代码输出的是什么？
// //2、如果把var x = 2注释掉，输出的又是什么？
// //3、如果把f函数第一个参数x改成xx，输出的又是什么？
// //4、如果把f函数第一个参数x设置了默认值为4，输出的又是什么？

第一题

其实第一题就已经有很多同学答错了，可能同学们会得出两种答案

• 1、 undefined、3、3、1
• 2、 undefined、3、2、3

其实通俗点就是两种想法

• 1、参数y这个函数里的 x = 3 改变的是 全局 的 x
• 2、参数y这个函数里的 x = 3 改变的是 函数f内部 的 x

但其实这两种想法都是错的，因为大部分同学只看到了两个 x

• 1、全局的 x
• 2、f函数内部的 x

但其实忽视还有另一个 x

• 3、f函数的参数 x

这是解题的关键，来看看王红元老师的讲解吧

也就是其实 参数y函数 里 x = 3 其实改变的是 f函数 的 参数x ，而不是 全局x 或者 f函数内部x

所以正确的输出应该是 undefined、3、2、1

var x = 1;
function f(x, y = function () { x = 3; console.log(x); }) {
  console.log(x) // 参数x没有默认值，所以：undefined
  var x = 2 
  y() // 改变的是参数x，且输出参数x，所以：3
  console.log(x) // 输出的是局部x，所以：2
}
f()
console.log(x) // 全局x无影响，所以：1

第二题

第二题就简单多了，去掉 var x = 2 之后，那 f函数 内部就是有一个 x ，那就是 参数x ，所以 f函数 内部 console.log(x) 都是根据 参数x 实时的值来输出的

var x = 1;
function f(x, y = function () { x = 3; console.log(x); }) {
  console.log(x) // 参数没有默认值，所以：undefined
  // var x = 2
  y() // 改变参数x = 3，且输出参数x，所以：3
  console.log(x) // 实时参数x的值，所以：3
}
f()
console.log(x) // 全局x无影响，所以：1

第三题

第三题，把 参数x 改成了 参数xx ，那么 参数y函数 的 x = 3 改变的就是 全局x ，因为 参数x 没了，又因为就近原则， y函数 里的 x 就是指向 全局x

var x = 1;
function f(xx, y = function () { x = 3; console.log(x); }) {
  console.log(x) // var变量提升但未赋值，所以：undefined
  var x = 2
  y() // x = 3改变的是全局x，且输出全局x，所以：3
  console.log(x) // x = 3改变的是全局x，与局部x无关，所以：2
}
f()
console.log(x) // 全局x被y函数改变了，所以：3

第四题

第四题，是让 参数x 默认等于 4 ，那其实跟第一题的差别就是 参数x 有无默认值

var x = 1;
function f(x = 4, y = function () { x = 3; console.log(x); }) {
  console.log(x) // 参数x默认值，所以：4
  var x = 2 
  y() // 改变的是参数x = 3，且输出参数x，所以：3
  console.log(x) // 输出的是局部x，所以：2
}
f()
console.log(x) // 全局x无影响，所以：1

结语

如果你觉得此文对你有一丁点帮助，点个赞，鼓励一下林三心哈哈。或者可以加入我的摸鱼群，我们一起好好学习啊啊啊啊啊啊啊，我会定时模拟面试，简历指导，答疑解惑，咱们互相学习共同进步！！