前端ES整理要点：变量提升，透过现象看本质

变量提升，这个前端开发中的“老生常谈”，它的本质是什么？如何理解变量提升？又该如何规避提升带来的坑？本文将从原理、现象和规避三个角度，带你彻底看透变量提升。

编译变量提升：透过现象看本质

1. 现象：提前执行

变量提升，是指在JavaScript代码执行前，所有变量声明都会被提升到函数作用域或全局作用域的顶部。无论变量是否定义，都会生成一个未定义的占位符，并赋值给变量。

// 全局变量提升
console.log(myVar); // undefined
var myVar;

2. 原理：编译阶段的生成

JavaScript引擎在执行代码前，会先进行编译阶段。编译器会扫描代码，识别所有变量声明并生成一个名为活动对象（Activation Object）的空对象。该空对象包含了变量的属性，初始值为undefined。

3. 结论：函数内和全局的差异

• 函数内： 函数内的变量提升发生在函数执行前，函数体内的变量和形参都会被提升到活动对象。
• 全局： 全局变量提升发生在脚本执行前，所有全局变量都会被提升到全局对象（通常是window）。

变量提升带来的“坑”

1. 覆盖

变量提升会覆盖后声明的同名变量，导致意料之外的赋值。

function foo() {
  a = 1; // 提升后 a = undefined
  var a; // 覆盖后 a = 1
}

2. 提前访问

由于提升，在变量定义前访问它，会返回undefined。

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

规避变量提升的陷阱

1. 使用const和let

ES6中的const和let声明不会提升变量，从根本上避免了变量提升带来的问题。

const myConst = 1; // 不提升
let myLet = 1; // 不提升

2. 严格模式

严格模式下，变量未声明即访问，会抛出错误，强制开发人员提前声明变量。

"use strict";
console.log(myVar); // ReferenceError

3. 变量声明内联

将变量声明内联到使用它的位置，避免提升的困扰。

function foo() {
  var a = 1; // 在使用前声明
  // ...
}

结语

变量提升是JavaScript执行机制的一个重要概念，理解其原理和现象有助于规避提升带来的陷阱。通过使用const和let、严格模式和变量声明内联，开发者可以避免变量提升带来的困惑，写出更加清晰、健壮的代码。