前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。
首先说明这不是标题党，是真的，这道题席卷了几十个群，能回答出来的人是微乎其微，最后连王红元老师都亲自出面解答了这道题。
题目
先来看看这道题长什么样吧
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
结语
如果你觉得此文对你有一丁点帮助，点个赞，鼓励一下林三心哈哈。
如果你想一起学习前端或者摸鱼，那你可以加我，加入我的摸鱼学习群，点击这里 ---> 摸鱼沸点
如果你是有其他目的的，别加我，我不想跟你交朋友，我只想简简单单学习前端，不想搞一些有的没的！！！
