JavaScript变量作用域迷惑点：catch块内var声明变量的访问差异

(function () {
  try {
    throw new Error();
  } catch (x) {
    var x = 1;
    var y = 2;
    console.log(x);
  }
  console.log(x);
  console.log(y);
})()

这个输出差异是catch块参数的特殊作用域规则和var的变量提升特性共同导致的，核心逻辑如下：

• 首先var声明的变量会提升到当前函数作用域的顶部，初始化值为undefined，所以代码执行前，整个立即执行函数的作用域里已经提前创建了变量x和y，值都是undefined。
• catch (x)里的参数x是catch块独有的局部绑定，作用域仅局限于catch块内部，优先级高于函数作用域里提升的同名变量x，二者是完全独立的两个变量。
• 进入catch块后：
  1. 执行var x = 1时，因为catch块内已经有了参数x这个局部变量，这里的赋值只会修改catch局部的x为1，不会影响到函数作用域里的x。
  2. 执行var y = 2时，catch块没有同名参数遮挡，赋值会直接作用到函数作用域里提前提升的y，把它的值修改为2。
  3. catch块内的console.log(x)访问的是局部的x，所以输出第一个值1。
• 跳出catch块后，catch的局部x会被销毁：
  1. 此时访问的x是函数作用域里的那个x，它从来没有被赋值过，所以输出第二个值undefined。
  2. 访问的y已经在catch块内被赋值为2，所以输出第三个值2。

内容的提问来源于stack exchange，提问作者aryan singh