Skip to content

变量提升的坑

January 3, 2023 | 08:27 PM

变量提升

变量提升是很常见的面试题/机试题考点

介绍

由于有变量提升的存在,我们可以在声明一个函数之前使用该函数,例如:

/**
* 正确的方式:先声明函数,再调用函数 (最佳实践)
*/
function catName(name) {
    console.log("我的猫名叫 " + name);
}

catName("Tigger");

/*
以上代码的执行结果是:"我的猫名叫 Tigger"
*/

上述的写法是先声明函数,再进行调用,这是比较推荐的写法,但如果是先调用函数,后声明的话,其实也是可以的,但是不推荐这种写法:

/**
* 不推荐的方式:先调用函数,再声明函数
*/

catName("Chloe");

function catName(name) {
    console.log("我的猫名叫 " + name);
}

/*
代码执行的结果是:"我的猫名叫 Chloe"
*/

这是因为在 JavaScript 中执行上下文的工作方式造成的。

函数和变量相比,会被优先提升。这意味着函数会被提升到更靠前的位置。声明函数也会导致变量提升

只有声明被提升

JavaScript 只会提升声明,不会提升其初始化。如果一个变量先被使用再被声明和赋值的话,使用时的值是 undefined。参见例子:

image.png

console.log(num); // Returns undefined
var num;
num = 6;

如果你先赋值、再使用、最后声明该变量,使用时能获取到所赋的值

num = 6;
console.log(num); // returns 6
var num;

再来看几个类似的例子:

// Example 1 - only y is hoisted
var x = 1;                 // 声明 + 初始化 x
console.log(x + " " + y);  // '1 undefined'
var y = 2;                 // 声明 + 初始化 y

// Example 2 - Hoists
var num1 = 3;                   // Declare and initialize num1
num2 = 4;                       // Initialize num2
console.log(num1 + " " + num2); //'3 4'
var num2;                       // Declare num2 for hoisting

// Example 3 - Hoists
a = 'Cran';              // Initialize a
b = 'berry';             // Initialize b
console.log(a + "" + b); // 'Cranberry'
var a, b;                // Declare both a & b for hoisting