前端经典作用域面试题，避免入坑不要错过

一般看理论性知识相对枯燥一些，下面一起带着问题来解释吧。

问题

求以下输出结果，并说明原因：

var x = 1
function foo(x,y = function(){
	 var x = 2
}){
	x = 3
	y()
	console.log(x)
}
foo()
cosnole.log(x)

解析

首先我们要明白作用域的问题，函数作用域以及全局作用域的知识点。
值得注意的是，上述问题中，y函数里的x看似将作为全局作用域，实则赋值的是foo()函数中的参数x

var x = 1
function foo(
  x,
  y = function () {
    x = 2 // 如果此处是 x = 2,则x为foo()函数的参数x，不会覆盖全局变量1，若有var声明，则x作用域为y()函数内部
  }
) {
  x = 3 // 因为此时的x为foo()函数的参数，所以不是全局变量，并不能覆盖全局变量之前的值1
  y()
  console.log(x)
}
foo() // 2
console.log(x) // 1

如果foo()函数没有为x的参数呢？

var x = 1
function foo(
  y = function () {
    x = 6 // foo()函数没有为x的参数，所以x为全局变量
  }
) {
  x = 3 // foo()函数没有为x的参数，所以x为全局变量
  y()
  console.log(x) 
}
foo() // 6
console.log(x) // 6

结果显然会覆盖全局变量1。

那如果foo()函数内部有x呢？

var x = 1
function foo(
  y = function () {
    x = 6
  }
) {
  var x = 3 // 如果函数内部有x值则将不继续向外层寻找x值，故内部函数作用域x值为3
  y()
  console.log(x)
}
foo() // 3
console.log(x) // 6

总结

总结就是大家审题一定要仔细呀，不要想当然！