最通俗易懂的Javascript变量提升详解

什么是变量提升

变量提升是Javascript的一种默认行为，指在代码执行期间，Javascript将变量和函数声明提升到它们所在作用域的顶部，以便能够访问它们。这意味着可以在声明之前使用变量或函数。

变量提升的情况

Javascript中有两种类型的声明：变量声明和函数声明。这两种声明在变量提升时会被解析并移动到作用域的顶部。

例如，考虑以下代码片段：

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

这将输出undefined和1。这是因为Javascript首先将变量a声明提升到代码块的顶部，但没有给它赋值，所以第一次console.log的结果是undefined。然后在下面的赋值语句中，变量a被赋值为1，第二次console.log返回变量的值1。

但是，当使用let或const声明变量时，情况稍有不同。在这种情况下，变量只会提升到声明的位置，并且在声明之前访问变量会导致ReferenceError。

例如，考虑下面的代码：

console.log(b);
let b = 2;
console.log(b);

这将在console.log(b)时抛出ReferenceError，因为变量b只在声明语句之后分配存储空间。

函数提升

除了变量提升之外，Javascript还会提升函数声明。在函数提升时，整个函数体都被提升到作用域的顶部。这意味着可以在声明之前调用函数。

例如，考虑以下代码片段：

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

这将在不抛出错误的情况下输出hello, world!。这是因为函数foo被提升到代码块的顶部，可以在声明之前调用它。

注意：使用函数表达式时，只有变量名被提升，而函数体并不会被提升。

例如，考虑下面的代码：

bar();
let bar = function() {
  console.log("hello, world!");
}

这将在bar is not a function时抛出错误。这是因为只有变量bar被提升，而函数体并没有被提升。因此，在调用之前定义了bar，但它的值还没有分配。

示例说明

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

这个例子已经在前面讲过了，变量a被声明并赋值为1，输出为undefined和1。

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

这个例子中，函数foo被声明并调用，输出为hello, world!。

在实际编程中，需要注意变量和函数声明的位置以及它们被提升的顺序。尤其是在大型代码库中，如果不仔细处理变量提升，可能会导致意想不到的结果。