JS函数参数作用域问题

关于JS函数参数作用域的问题

问题一

声明在函数外部的，第一个x是全局变量。

声明在函数内部的x，它的作用域就是局部的，随着函数foo存在而存在，只有函数内部可以调用，在函数外部是不可以访问调用的。

但是作为foo函数中的参数x和谁是同一作用域？

在参数y中的x的作用域又应该是与谁相同？

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

//输出 3，1

试图百度摸索答案

在这里，我们可以看到f函数被调用，携带了一个参数2，而在f函数的参数列表中，我们就可以知道第一个参数x为2，而y的值是由x的值决定（x赋值给y），重点是这个x不是全局变量的x，也不会是函数内部定义的x，它指向的是第一个参数x，所以最后输出2

var x = 1;
function f(x,y = x) {
  var x = 'hello'
	console.log(y);
}
f(2)
//2

再看这个，f函数参数列表中，y=x，这时候的x并没有声明，它只能往外层作用域找，所以就找到了全局变量x，所以这时候的x就指向可外层的全局变量x，最后输出的是1

let x = 1;
function f(y = x) {
  let x = 2;
  console.log(y);
}
f()
//1

最后看这个，在这个y=x中，x没有声明，全局变量也没有声明x，所以这时候编译会报x未定义的错误

function f(y = x) {
  let x = 2;
  console.log(y);
}
f()
//ReferenceError: x is not defined

这种情况下也会报错，x=x也会形成一个单独的作用域，实际上执行的是let x = x [暂时性死区]

function f(x=x){
	console.log(x);
}
f()
//Cannot access 'x' before initialization()初始化前无法访问x

关于函数内部的变量作用域

在函数内部输出未定义变量时，如在函数中输出x，则是输出参数列表中传进来的x的值5

var x = 1;
function foo(x,y = x){
  console.log('y:',y);
  console.log('x:',x);
}
foo(5)
console.log('全局:',x);

//输出
y: 5
x: 5
全局: 1

但是如果函数内部有定义x，则输出实际定义的x=10的值

var x = 1;
function foo(x,y = x){
  var x = 10
  console.log('y:',y);
  console.log('x:',x);
}
foo(5)
console.log('全局:',x);

//输出
y: 5
x: 10
全局: 1

这时候我再回头看问题1，恍然大悟

调用foo函数，函数foo的参数形成一个单独的作用域，在这个作用域中，首先声明了变量x，然后声明变量y，y的默认值是一个匿名函数，匿名函数中的x指向的是同一个作用域的第一个参数x【这时候第一个参数的值就被赋值为2，在下面做了验证】，接着是函数内部也声明了一个x变量，但是该变量与第一个参数x不是一个作用域的，所以不是同一个变量，因此执行完y后，输出的x值为3，输出的是函数自己内部声明的x的值

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

//输出 3，1

验证第一个参数x的值是否被y的默认值【匿名函数】修改

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

//输出2