帮助你理解变量提升与函数提升的困惑

变量提升与函数提升

变量提升和函数提升是JavaScript执行上下文中和作用域中两个重要的概念。

变量提升是指，在执行之前，所有变量都会被提升到其作用域的顶部。这意味着，变量可以在声明之前使用，但此时它的值将是undefined。

函数提升是指，在执行之前，所有函数都会被提升到其作用域的顶部。这意味着，函数可以在声明之前调用。

变量提升和函数提升都是JavaScript的特性，可以在很多情况下使用。例如，变量提升可以用来初始化变量，函数提升可以用来创建自调用函数。

变量声明提升

通过var定义（声明）的变量，在定义语句之前就可以访问到，值为undefined。

console.log(a); // undefined
var a = 10;

函数声明提升

通过function声明的函数，在之前就可以直接调用。

foo(); // "Hello world!"

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

注意：必须是function声明

只有使用function声明的函数才会被提升，使用箭头函数或其他方式定义的函数不会被提升。

// 不会被提升
const foo = () => {
  console.log("Hello world!");
};

foo(); // TypeError: foo is not a function

变量提升和函数提升的应用

变量提升和函数提升可以在很多情况下使用。例如：

• 初始化变量。变量提升可以用来初始化变量，这样就可以在变量声明之前使用它。

var a = 10;
console.log(a); // 10

• 创建自调用函数。函数提升可以用来创建自调用函数，自调用函数可以在定义时立即执行。

(function() {
  console.log("Hello world!");
})(); // "Hello world!"

变量提升和函数提升的注意事项

虽然变量提升和函数提升可以非常有用，但需要注意以下几点：

• 变量提升可能会导致意外的bug。如果在变量声明之前使用变量，则变量的值将是undefined，这可能会导致意外的结果。

console.log(a); // undefined
var a = 10;

• 函数提升可能会导致函数被意外调用。如果在函数声明之前调用函数，则函数将被提升到作用域的顶部，并可以在声明之前被调用。

foo(); // "Hello world!"

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

总结

变量提升和函数提升是JavaScript执行上下文中和作用域中两个重要的概念。它们可以在很多情况下使用，但需要注意可能导致的意外结果。