JavaScript中如何从函数访问父级变量？附代码示例及术语问询

解决方法 #

你的代码中，函数内部声明的let x = "Welcome"遮蔽了外部作用域的同名变量x。要访问外部的x，可以采用以下两种方式：

• 提前保存外部变量的引用
  在函数外部将x赋值给一个新变量，在函数内使用该变量即可避开遮蔽：

  let x = 5;
  const outerX = x;
  const f = (n: number) => {
    let x = "Welcome";
    return outerX * n; // 此处使用的是外部的x值
  };
  

• 通过全局对象访问（仅适用于外部x处于全局作用域的场景）
  如果外部x是全局变量，可使用globalThis（跨浏览器/Node.js环境通用）直接访问全局作用域的变量：

  let x = 5;
  const f = (n: number) => {
    let x = "Welcome";
    return globalThis.x * n; // 访问全局作用域的x
  };
  

技术名称 #

内部作用域的同名变量覆盖外部作用域变量的现象，技术上称为变量遮蔽（Variable Shadowing）。我们访问被遮蔽的外部变量的操作，本质是突破变量遮蔽的限制，核心概念即为变量遮蔽。

内容的提问来源于stack exchange，提问作者Wisam Jbori