var 的函数作用域缺陷：变量提升（hoisting）如何导致逻辑错误？

理解变量提升（Hoisting）

在 JavaScript 中，变量声明会被提升到其作用域的顶部，这就是所谓的"变量提升"（Hoisting）。但需要注意的是，只有声明被提升，初始化并不会被提升。

var 的提升行为

console.log(x); // undefined（不是 ReferenceError）
var x = 5;
console.log(x); // 5

// 上面的代码实际上等价于：
var x;
console.log(x); // undefined
x = 5;
console.log(x); // 5

函数声明的提升

函数声明也会被提升，并且整个函数体都会被提升：

console.log(foo()); // "Hello, World!"

function foo() {
  return "Hello, World!";
}

// 上面的代码实际上等价于：
function foo() {
  return "Hello, World!";
}

console.log(foo()); // "Hello, World!"

函数作用域带来的问题

使用 var 声明的变量具有函数作用域，这在某些情况下会导致意外的行为。

循环中的闭包问题

// 问题示例：所有回调函数都会输出相同的值
for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 输出三次 3
  }, 100);
}

// 解决方案1：使用立即执行函数（IIFE）
for (var i = 0; i < 3; i++) {
  (function(index) {
    setTimeout(function() {
      console.log(index); // 输出 0, 1, 2
    }, 100);
  })(i);
}

// 解决方案2：使用 let（ES6）
for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 输出 0, 1, 2
  }, 100);
}

条件语句中的变量声明

function example() {
  console.log(x); // undefined
  
  if (false) {
    var x = 5; // 即使条件为 false，var 声明仍会被提升
  }
  
  console.log(x); // undefined（不是 ReferenceError）
}

变量提升导致的常见错误

意外的全局变量

function accidentalGlobal() {
  x = 5; // 忘记使用 var/let/const，创建了全局变量
}

accidentalGlobal();
console.log(x); // 5（全局变量）

函数覆盖问题

var foo = function() {
  console.log("我是变量 foo");
};

function foo() {
  console.log("我是函数 foo");
}

foo(); // "我是变量 foo"
// 函数声明被提升并首先定义，然后变量赋值覆盖了函数

最佳实践

为了避免变量提升带来的问题，建议采用以下最佳实践：

1. 使用 let 和 const

// 使用 let 和 const 避免提升问题
for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 输出 0, 1, 2
  }, 100);
}

const PI = 3.14159;
let radius = 5;

2. 在函数顶部声明变量

function betterPractice() {
  // 在函数顶部声明所有变量
  var x, y, z;
  
  // 然后进行赋值和使用
  x = 1;
  y = 2;
  z = x + y;
  
  return z;
}

3. 使用严格模式

'use strict';

function strictModeExample() {
  x = 5; // ReferenceError: x is not defined
}

总结

变量提升是 JavaScript 的一个重要特性，但也是导致许多 bug 的根源。理解变量提升的工作原理，以及如何通过使用 let、const 和良好的编码实践来避免相关问题，对于编写可靠的 JavaScript 代码至关重要。