The seemingly simple questions swept through dozens of front-end groups, and Teacher Wang Hongyuan came forward to answer them in person

Preface

Hello everyone, I am a forest three hearts, the most easy to understand the words of the hardest knowledge is my motto, is based on advanced premise is my first heart.

First of all, this is not a title party, it is true. This question has swept dozens of groups, and very few people can answer it. In the end, even Wang Hongyuan came forward to answer this question himself.

topic

Let's see what this question looks like first

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，输出的又是什么？

first question

In fact, many students have already answered the first question incorrectly. Maybe the students will come up with two answers

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

In fact, the popular point is two kinds of ideas

• 1. The parameter y x = 3 this function changes is global x
• 2, the parameter y of this function in the x = 3 change is internal function F x

But in fact, these two ideas are wrong, because most students only saw two x

• 1. Global x
• x inside the f function

But actually ignore that there is another x

• 3. The parameter of the f function x

This is the key to solving the problem. ’s teacher Wang Hongyuan’s 161aa30f9e5b62

That is to say, in the parameter y function, x = 3 actually changes the parameter x f function, instead of the global x or the f function internal x

So the correct output should be 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

Second question

The second question is much simpler, removed var x = 2 after that f internal function is to have a x , that is parameter x, so f internal functions console.log(x) are based to output real-time value of the parameter 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

Third question

The third question, the parameter x into the parameters xx, then parameter y function x = 3 change is global x, because parameter x did not, and because the principle of proximity, y function in the x is pointing Global 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

Fourth question

The fourth problem is to make parameter x default equal 4 , that fact with the first question of the difference is parameter x whether the default values

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

Concluding remarks

If you think this article is of little help to you, please give me a thumbs up and encourage Lin Sanxin haha. Or you can join my fishing group, we study hard together, ah ah ah ah ah, I will mock interviews regularly, resume guidance, answer questions and answer questions, let's learn from each other and make progress together! !