作用域链：JavaScript中如何解决变量名冲突？

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

在 JavaScript 中，当代码中出现多个相同的变量名时，JavaScript 引擎将根据 作用域链和 变量提升的规则来决定使用哪个变量。以下是详细的解析：

1. 变量声明的作用域

1.1 全局作用域与函数作用域

• 全局作用域：在全局上下文中定义的变量，可以在任何地方访问。
• 函数作用域：在函数内部定义的变量，只能在该函数内部访问。

1.2 块级作用域

• 使用 let 和 const 声明的变量有块级作用域，只在它们被定义的代码块内有效。
• 使用 var 声明的变量有函数作用域，不会受到块级作用域的限制。

1.3 作用域链

当查找变量时，JavaScript 引擎遵循作用域链的顺序，从最近的作用域开始查找，逐层向外延伸，直到全局作用域，直到找到该变量或抛出错误为止。

2. 变量选择的优先级

2.1 选择顺序

当在代码中引用变量时，JavaScript 引擎会按照以下顺序查找：

1. 当前作用域：首先查找当前块或当前函数的作用域中的变量。
2. 外部作用域：如果当前作用域没有找到，则查找外部作用域（如果存在），以此类推，直到全局作用域。
3. 全局作用域：最终查找全局作用域中的变量。

2.2 示例代码

let a = 10; // 全局作用域

function outerFunction() {
  let a = 20; // outerFunction 的作用域

  function innerFunction() {
    let a = 30; // innerFunction 的作用域
    console.log(a); // 输出: 30
  }

  innerFunction();
}

outerFunction();

console.log(a); // 输出: 10

在这个例子中：

• 在 innerFunction 中，引用的 a 是在它自己的作用域内定义的，值为 30。
• outerFunction 中的 a 值为 20，但没有被访问。
• 在全局上下文中的 a 值为 10，它也没有被访问，因为在内层函数中找到了一个更接近的相同变量。

3. 变量提升的影响

在 JavaScript 中，变量声明会被提升（hoisted）到其所在上下文的顶部，但只提升声明，不会提升赋值。这意味着即使变量在后面才被声明，引用时也不会抛出错误。

示例代码

console.log(a); // 输出: undefined
var a = 5;
console.log(a); // 输出: 5

• 在这段代码中，尽管 a 的声明在第一行之后，但因为变量提升，JavaScript 引擎会将 var a 提升到顶部，但赋值 a = 5 保持在原来的位置。

4. 重复声明的情况

• 使用 var 声明同一变量名会被认为是重复声明，后面的声明会覆盖前面的声明值。

示例代码

var x = 1;
var x = 2;
console.log(x); // 输出: 2

• 对于 var，相同的变量可以在同一作用域内重复声明，而后一个声明会覆盖前一个。

• 使用 let 和 const 时，如果在同一作用域内重复声明同名变量，将导致语法错误。

示例代码

let y = 10;
let y = 20; // 报错: SyntaxError: Identifier 'y' has already been declared

5. 总结

当代码中出现相同的变量名时，JavaScript 引擎首先优先查找当前作用域中的变量，如果找不到，则逐步查找其外层作用域，直到找到全局作用域中的变量。在变量提升的情况下，考虑到声明和赋值的不同，解释器会遵循不同的规则。因此，在编写代码时，良好的变量命名和限制变量作用域的使用可帮助避免冲突和错误。