var 的缺陷：为什么它会引发变量提升和函数提升的问题？

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

在 JavaScript 中， var 是最早用于声明变量的关键字，但它存在一些缺陷，这些缺陷促使了 let 和 const 的引入。以下是 var 的主要缺陷以及 let 和 const 引入的原因：

1. var 的缺陷

1.1 变量提升（Hoisting）

使用 var 声明的变量会在函数或全局上下文中提升到定义之前。这可能导致一些意外的行为和错误。

示例代码：

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

在这个例子中，变量 a 在声明之前被访问，但并没有抛出错误，而是返回 undefined。这可能会造成困惑。

1.2 函数作用域

var 的作用域是函数级的，而不是块级的。这意味着如果在一个块内部（如 if 语句）使用 var 声明变量，该变量依然对全局或整个函数可见，而不是仅限于该块内。

示例代码：

if (true) {
  var x = 10;
}
console.log(x); // 输出: 10

这可能导致命名冲突和不必要的变量污染。

1.3 变量的重复声明

使用 var 可以在同一作用域内重复声明变量，这可能会引起混淆和不必要的错误。

示例代码：

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

虽然看似正常，但这会使得代码的可维护性降低。

2. let 和 const 的引入

由于 var 的这些缺陷，ES6 引入了 let 和 const。这两者对变量声明提供了更严格和可预期的处理。

2.1 let

• 块级作用域：let 声明的变量只在其所在的代码块内部有效，避免了变量污染。

  示例代码：

  if (true) {
    let z = 20;
  }
  console.log(z); // 报错: ReferenceError: z is not defined
  

• 不允许重复声明：在同一作用域内，无法使用 let 重复声明变量，帮助避免命名冲突。

  示例代码：

  let a = 1;
  let a = 2; // 报错: SyntaxError: Identifier 'a' has already been declared
  

2.2 const

• 常量声明：const 声明的变量必须在声明时初始化，且其值不能被重新赋值。

  示例代码：

  const PI = 3.14;
  PI = 3.15; // 报错: TypeError: Assignment to constant variable.
  

• 块级作用域：const 也具有块级作用域特性，与 let 类似。

  示例代码：

  if (true) {
    const PI = 3.14159;
  }
  console.log(PI); // 报错: ReferenceError: PI is not defined
  

3. 总结

引入 let 和 const 的主要目的是改善变量声明的灵活性和安全性，解决 var 带来的问题。通过引入块级作用域、禁止重复声明和常量特性，JavaScript 变得更加可预测和可维护，开发者能更好地管理变量的作用范围和生命周期。这些改进使得代码更加清晰，降低了意外错误的可能性。