举例子说明javascript的变量声明提升和函数声明提升

JavaScript的变量声明提升和函数声明提升是容易混淆的概念，它们会导致代码的行为与预期不符。下面用例子说明：

变量声明提升 (Variable Hoisting)

• var 声明:

console.log(x); // 输出 undefined，而不是报错
var x = 10;
console.log(x); // 输出 10

解释：虽然 x 的赋值在 console.log(x) 之后，但由于 var 的变量声明提升机制，JavaScript 引擎会先“扫描”整个代码块，将 var x 提升到作用域的顶部，相当于：

var x; // 声明被提升到这里
console.log(x); // x 已经声明，但未赋值，所以是 undefined
x = 10;
console.log(x); // x 现在被赋值为 10

• let 和 const 声明:

console.log(y); // 报错：ReferenceError: Cannot access 'y' before initialization
let y = 20;

console.log(z); // 报错：ReferenceError: Cannot access 'z' before initialization
const z = 30;

解释：let 和 const 也有提升，但它们不会被初始化。在声明之前访问它们会抛出 ReferenceError。它们处于“暂时性死区”（Temporal Dead Zone）。

函数声明提升 (Function Hoisting)

foo(); // 输出 "Hello"

function foo() {
  console.log("Hello");
}

bar(); // 报错：TypeError: bar is not a function

var bar = function() {
  console.log("World");
};

解释：

• function foo() 这种函数声明会被整个提升到作用域顶部，包括函数体。所以可以在声明之前调用 foo()。
• var bar = function() 是一个函数表达式，只有 bar 这个变量声明会被提升，而赋值操作不会提升。因此，在声明之前调用 bar() 会报错。

总结:

• var 声明的变量会被提升并初始化为 undefined。
• let 和 const 声明的变量会被提升，但不会被初始化，访问它们会抛出 ReferenceError。
• 函数声明会被整个提升到作用域顶部。
• 函数表达式只有变量声明会被提升，赋值操作不会提升。

理解变量提升和函数提升对于编写可预测和易于维护的 JavaScript 代码至关重要。 推荐使用 let 和 const 声明变量，避免使用 var，以减少提升带来的潜在问题。 使用函数表达式而不是函数声明，除非你明确需要函数提升的特性。

希望以上例子能帮助你理解 JavaScript 的变量声明提升和函数声明提升。