JavaScript 中的变量阴影

在 JavaScript 中，变量阴影是指内部作用域的变量屏蔽了外部作用域的同名变量，导致外部作用域的变量不可见。

举个例子

var x = 10;

function foo() {
  var x = 2;
  console.log(x); // 输出 2
}

foo();

console.log(x); // 输出 10

在上面的代码中，变量 x 在全局作用域和函数 foo 内部都有定义。在调用 foo 函数时，内部的 x 变量屏蔽了全局的 x 变量，所以输出的结果是 2。在函数执行完后，又回到了全局作用域，此时调用 console.log(x) 输出的是全局的 x 变量的值，即 10。

解决变量阴影的方法

1. 使用不同的变量名

对于变量阴影问题，最简单的方法就是使用不同的变量名。例如，将上面的 foo 函数中的 x 变量名改为 y，就不会与全局作用域中的变量 x 产生冲突了。

var x = 10;

function foo() {
  var y = 2;
  console.log(y); // 输出 2
}

foo();

console.log(x); // 输出 10

2. 使用 ES6 中的 let 和 const 关键字

let 和 const 关键字可以在代码块级别引入作用域，从而避免变量阴影问题。在使用 let 关键字声明变量时，该变量只在 let 声明所在的代码块内有效。const 关键字声明的变量是常量，也仅在声明所在的代码块内有效。

var x = 10;

function foo() {
  let x = 2;
  console.log(x); // 输出 2
}

foo();

console.log(x); // 输出 10

小结

变量阴影是 JavaScript 中的一个常见问题，但是只要注意作用域的嵌套和变量声明的方式，就可以避免这个问题。在现代的 JavaScript 中，使用 let 和 const 关键字可以更好的解决变量阴影问题。