JavaScript基础-作用域概述

在学习JavaScript的过程中，理解其作用域（Scope）机制是至关重要的。它不仅影响变量的生命周期和可见性，还决定了代码执行期间如何查找变量值。本文将深入探讨JavaScript的作用域概念，包括全局作用域、函数作用域、块级作用域以及ES6引入的let和const关键字对作用域的影响。

一、什么是作用域？

作用域定义了变量和函数的有效范围，即它们在哪里可以被访问。在JavaScript中，有三种主要的作用域类型：全局作用域、函数作用域和块级作用域。

（一）全局作用域

当变量或函数在任何函数之外声明时，它属于全局作用域。这意味着这些变量或函数在整个程序中都是可访问的。

var globalVar = "I'm global";

function printGlobal() {
    console.log(globalVar); // 输出: I'm global
}

printGlobal();
console.log(globalVar); // 输出: I'm global

注意：尽量避免使用全局变量，因为它们可能导致命名冲突并增加维护难度。

（二）函数作用域

在函数内部声明的变量具有函数作用域，意味着它们只能在该函数内部访问，并且对于每次函数调用都会创建新的变量实例。

function myFunction() {
    var functionScoped = "I'm scoped to myFunction";
    console.log(functionScoped);
}

myFunction(); // 输出: I'm scoped to myFunction
// console.log(functionScoped); // 报错: functionScoped is not defined

（三）块级作用域

传统上，JavaScript只有全局作用域和函数作用域。但是，随着ES6的引入，通过let和const关键字实现了块级作用域（block scope）。块由一对花括号 {} 定义，比如条件语句或循环体内的代码块。

if (true) {
    let blockScoped = "I'm block-scoped";
    const constantValue = "This is a constant";
    console.log(blockScoped); // 输出: I'm block-scoped
    console.log(constantValue); // 输出: This is a constant
}

// console.log(blockScoped); // 报错: blockScoped is not defined
// console.log(constantValue); // 报错: constantValue is not defined

二、变量提升与暂时性死区

（一）变量提升

在JavaScript中，使用var声明的变量会被“提升”到其所在作用域的顶部，但初始化不会被提升。

console.log(hoistedVar); // 输出: undefined
var hoistedVar = "Variable is hoisted";

function doSomething() {
    console.log(hoistedFunc); // 输出: [Function: doSomething]
}
doSomething();

function doSomething() {
    console.log("Function is hoisted");
}

（二）暂时性死区（Temporal Dead Zone, TDZ）

let和const声明的变量不存在变量提升现象，在声明之前访问会抛出ReferenceError，这就是所谓的TDZ。

// console.log(tdzVar); // 报错: Cannot access 'tdzVar' before initialization
let tdzVar = "Variable in TDZ";

三、闭包

闭包是指有权访问另一个函数作用域中变量的函数，通常是在一个函数内部定义另一个函数。

function outerFunction(outerVariable) {
    return function innerFunction(innerVariable) {
        console.log('outerVariable:', outerVariable);
        console.log('innerVariable:', innerVariable);
    }
}

const newFunction = outerFunction('outside');
newFunction('inside'); // 输出: outerVariable: outside, innerVariable: inside

闭包允许我们从外部访问函数内部的变量，即使那个外部函数已经执行完毕。

四、结语

感谢您的阅读！如果你有任何问题或想法，请在评论区留言交流！