JavaScript变量提升机制

在JavaScript中，变量提升（Hoisting）是指声明变量时，变量的声明会被提升到其作用域的顶部，但赋值不会被提升。这意味着你可以在声明之前引用变量，但是值是undefined，因为实际的赋值操作尚未执行。

JavaScript的变量提升有两种，用var声明的变量以及用function声明的变量。

先有鸡还是先有蛋：直觉上会认为 JavaScript 代码在执行时是由上到下一行一行执行的。但实际上这并不完全正确，有一种特殊情况会导致这个假设是错误的。

考虑以下代码：

a = 2;

var a;

console.log(a);

很多人会认为是 undefined，因为 var a 声明在 a = 2 之后，他们自然而然地认为变量被重新赋值了，因此会被赋予默认值 undefined。但是，真正的输出结果是 2。

 

// 变量提升示例
console.log(globalVar); // 输出 undefined
var globalVar = 'I am now assigned!';

// 函数提升也适用于函数
console.log(myFunction()); // 输出 'Hello, World!'
function myFunction() {
  return 'Hello, World!';
}

// 如果函数和变量同名，函数会优先提升
console.log(myVar); // 输出 function myVar() {...}
var myVar = 'I am a string';
function myVar() {
  return 'I am a function';
}

// 实际上，上面的函数声明会被提升到这个地方
function myVar() {
  return 'I am a function';
}

// 变量提升只适用于var声明的变量，let和const声明的变量不受提升影响
console.log(letVar); // 报错：letVar is not defined
let letVar = 'I am a let variable';

console.log(constVar); // 报错：constVar is not defined
const constVar = 'I am a const variable';

 

为什么会出现这种情况？什么是变量/函数提升
包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理，这种现象称为提升。

但只有声明本身会被提升，而赋值或其他运行逻辑会留在原地

javascript并不是严格的自上而下执行的语言

变量声明提升：
1. JavaScript的变量提升是针对var的，而let和const不存在变量提升这一特性（let与const具有一个临时死区的概念，后续在es6的总结中会提到）

2.通过var定义的变量，在定义语句之前就可以访问到 值：undefined

3.变量提升就是变量会被提升到作用域的最顶上去，也就是该变量不管是在作用域的哪个地方声明的，都会提升到作用域的最顶上去。