看似簡單的題，席捲幾十個前端羣，王紅元老師都親自出面解答詳情 - javascript,前端,面試,作用域,ecmascript-6 Sunshine_Lin 博客

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心。

首先説明這不是標題黨，是真的，這道題席捲了幾十個羣，能回答出來的人是微乎其微，最後連王紅元老師都親自出面解答了這道題。

題目

先來看看這道題長什麼樣吧

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