聊一聊JS变量提升的细节

前端

2023-10-07 17:27:59

变量提升

在JavaScript中，变量提升是指在代码执行前，变量和函数的声明被提升到其所在的作用域的顶部。这意味着，即使变量或函数在代码中定义在后面，它们也可以在前面被访问和使用。

var声明的变量

使用var声明的变量会提升到其所在的作用域的顶部，并且初始化为undefined。这意味著，在变量被赋值之前，它可以被访问和使用，但其值为undefined。

let声明的变量

使用let关键字声明的变量也会提升到其所在的作用域的顶部，但不会初始化。这意味著，在变量被赋值之前，它不能被访问和使用，否则会报错。

function声明的函数

使用function关键字声明的函数也会提升到其所在的作用域的顶部。这意味著，函数可以在其被声明之前被调用。

if条件语句中的变量提升

在if条件语句中，变量提升仍然会发生。这意味著，即使变量在if条件语句的执行体内声明，它们也可以在if条件语句之前被访问和使用。但是，需要注意的是，只有在if条件语句的执行体被执行时，变量才会被赋值。

提升是否能穿透条件语句的执行体

变量提升不能穿透条件语句的执行体。这意味着，如果变量在if条件语句的执行体中声明，但if条件语句的执行体没有被执行，那么变量将不会被提升到if条件语句的外面。

示例

以下示例展示了变量提升的细节：

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

console.log(b); // ReferenceError: b is not defined
let b = 2;

function c() {
  console.log(d); // undefined
  var d = 3;
}

c();

if (true) {
  console.log(e); // ReferenceError: e is not defined
  let e = 4;
}