理解 JavaScript Scoping & Hoisting（二）

理解 JavaScript Scoping & Hoisting（二）

介绍

在 JavaScript 中，作用域和变量提升（hoisting）是非常重要的概念。在第一篇理解 JavaScript Scoping 和 Hoisting 的文章中，我们讨论了作用域和 JavaScript 内部如何解析变量名称的机制。本文将继续深入探讨 JavaScript 中的作用域和变量提升，包括函数作用域、闭包以及变量和函数声明提升等。

理解 JavaScript 中的函数作用域

JavaScript 中的函数作用域，意味着函数内部声明的变量只能在函数内部使用，而在函数外部是不可访问的。

function foo() {
    var bar = "Hello World!";
}

console.log(bar);   // Uncaught ReferenceError: bar is not defined

在上面的示例中，我们在 foo() 函数内部声明了 bar 变量，然后在函数外部尝试打印 bar，会抛出 ReferenceError。这个错误提示表明试图引用一个不存在的变量。

理解 JavaScript 中的闭包

JavaScript 中的闭包是指函数可以访问其所定义作用域中的变量。这意味着，即使该函数已经退出了作用域，它仍然可以访问该作用域内的变量。下面是一个使用闭包的示例：

function outer() {
    var x = 10;

    function inner() {
        console.log(x);
    }

    return inner;
}

var fn = outer();
fn();       // 10

在这个示例中，我们在 outer() 函数内部声明了 x 变量，并在 inner() 函数中使用了 x 变量。然后，我们将 inner() 函数作为返回值返回，并将其分配给变量 fn。最后，我们调用 fn() 函数，它将输出变量 x 的值。

在这个例子中，即使在 outer() 函数已经退出作用域之后，由于 inner() 函数仍然可以访问该作用域内的变量 x，所以 inner() 函数仍然可以正确地运行。

理解 JavaScript 中函数的变量和函数声明提升

在 JavaScript 中，函数和变量声明会被提升到其所在作用域的顶部，这意味着函数和变量可以在声明之前使用。

console.log(x);   // undefined
var x = 10; 

foo();    // "Hello World!"
function foo() {
    console.log("Hello World!");
}

在这个示例中，我们在变量 x 和函数 foo() 的声明之前尝试访问它们的值。尽管变量和函数在声明之前被打印出来并且没有被定义，但代码不会报错并最终输出了正确的值。

其中，变量的声明提升仅会提升变量的声明部分，不会提升初始化的部分，因此 console.log(x) 的结果为 undefined，而不是 10。

总结

作用域和变量提升是 JavaScript 中非常重要且基本的概念。在理解这些概念之后，我们可以更好地编写可维护的代码，并避免一些常见的错误。在本文中，我们深入探讨了 JavaScript 中的函数作用域、闭包以及变量和函数声明提升等概念，并使用示例来详细说明它们的用法。希望这篇文章对您有所帮助！