变量声明与作用域

JavaScript提供了多种声明变量的方式，每种方式都有不同的作用域规则。本文将介绍var、let和const的区别，以及块级作用域和函数作用域的概念。

变量声明方式

JavaScript中有三种声明变量的关键字：var、let和const。它们在变量提升、作用域和可变性方面有显著差异。

var 声明

var是JavaScript最早的变量声明方式，具有以下特点：

• 函数作用域：var声明的变量只在函数内部可见，而不是在块级作用域内
• 变量提升：var声明会被提升到当前作用域的顶部，但初始化不会
• 可以重复声明：同一作用域内可以多次声明同名变量
• 全局对象属性：在全局作用域声明的var变量会成为全局对象(window/global)的属性

// 变量提升示例
console.log(name); // 输出: undefined (而不是报错)
var name = "张三";

// 函数作用域示例
function testVar() {
    var x = 1;
    if (true) {
        var x = 2;  // 同一个变量，覆盖了之前的值
        console.log(x);  // 输出: 2
    }
    console.log(x);  // 输出: 2 (if块中的修改影响了函数作用域中的x)
}
testVar();

// 重复声明
var age = 25;
var age = 30; // 合法，age现在是30

let 声明

let是ES6(ES2015)引入的变量声明方式，具有以下特点：

• 块级作用域：let声明的变量只在当前块级作用域内可见
• 暂时性死区：变量在声明前不可访问
• 不可重复声明：同一作用域内不能重复声明同名变量
• 不会成为全局对象属性：在全局作用域声明的let变量不会成为全局对象的属性

// 块级作用域示例
function testLet() {
    let x = 1;
    if (true) {
        let x = 2;  // 这是一个新变量，与外部的x不同
        console.log(x);  // 输出: 2
    }
    console.log(x);  // 输出: 1 (if块中的修改不影响外部的x)
}
testLet();

// 暂时性死区示例
{
    // console.log(counter); // ReferenceError: Cannot access 'counter' before initialization
    let counter = 1;
}

// 不可重复声明
let user = "李四";
// let user = "王五"; // SyntaxError: Identifier 'user' has already been declared

const 声明

const也是ES6引入的，用于声明常量，具有以下特点：

• 块级作用域：与let相同
• 必须初始化：声明时必须赋值
• 不可重新赋值：一旦赋值不能修改（但对象和数组的内容可以修改）
• 暂时性死区：与let相同

// const基本用法
const PI = 3.14159;
// PI = 3.14; // TypeError: Assignment to constant variable

// 必须初始化
// const DATABASE_URL; // SyntaxError: Missing initializer in const declaration

// 对象内容可以修改
const person = { name: "赵六", age: 28 };
person.age = 29; // 这是允许的
// person = { name: "钱七", age: 30 }; // TypeError: Assignment to constant variable

// 数组内容可以修改
const numbers = [1, 2, 3];
numbers.push(4); // 这是允许的
// numbers = [5, 6, 7]; // TypeError: Assignment to constant variable

作用域

作用域决定了变量的可见性和生命周期。JavaScript中有几种不同类型的作用域。

全局作用域

在所有函数和块之外声明的变量属于全局作用域，可以在代码的任何地方访问。

// 全局变量
var globalVar = "我是全局变量";
let globalLet = "我也是全局变量";
const globalConst = "我是全局常量";

function accessGlobal() {
    console.log(globalVar); // 可以访问
    console.log(globalLet); // 可以访问
    console.log(globalConst); // 可以访问
}

函数作用域

在函数内部声明的变量只在该函数内部可见。

function functionScope() {
    var functionVar = "函数内的变量";
    let functionLet = "函数内的let变量";
    
    console.log(functionVar); // 可以访问
    console.log(functionLet); // 可以访问
}

functionScope();
// console.log(functionVar); // ReferenceError: functionVar is not defined
// console.log(functionLet); // ReferenceError: functionLet is not defined

块级作用域

使用let和const声明的变量具有块级作用域，只在当前块（由{}包围的区域）内可见。

{
    let blockLet = "块级作用域变量";
    const blockConst = "块级作用域常量";
    var blockVar = "函数作用域变量"; // 注意：var不遵循块级作用域
    
    console.log(blockLet); // 可以访问
    console.log(blockConst); // 可以访问
}

// console.log(blockLet); // ReferenceError: blockLet is not defined
// console.log(blockConst); // ReferenceError: blockConst is not defined
console.log(blockVar); // 可以访问，因为var不遵循块级作用域

词法作用域（静态作用域）

JavaScript使用词法作用域，这意味着函数的作用域在函数定义时确定，而不是在函数调用时。

let outerValue = "外部值";

function outerFunction() {
    let innerValue = "内部值";
    
    function innerFunction() {
        console.log(outerValue); // 可以访问外部函数的外部变量
        console.log(innerValue); // 可以访问外部函数的内部变量
    }
    
    innerFunction();
}

outerFunction();

变量提升

变量提升是JavaScript的一个特性，它将变量和函数声明移动到它们所在作用域的顶部。

var的提升

var声明的变量会被提升，但初始化不会。

console.log(hoistedVar); // 输出: undefined
var hoistedVar = "我被提升了，但我的值没有";

// 上面的代码等同于：
var hoistedVar;
console.log(hoistedVar);
hoistedVar = "我被提升了，但我的值没有";

函数声明的提升

函数声明会被完全提升，包括函数体。

// 可以在声明前调用
sayHello(); // 输出: "你好！"

function sayHello() {
    console.log("你好！");
}

let和const不存在变量提升

虽然let和const声明的变量也会被提升，但它们存在"暂时性死区"，在声明前不能访问。

// console.log(noHoisting); // ReferenceError: Cannot access 'noHoisting' before initialization
let noHoisting = "我不会被提升";

// 这同样适用于const
// console.log(constValue); // ReferenceError: Cannot access 'constValue' before initialization
const constValue = "我也不会被提升";

闭包与作用域

闭包是JavaScript中一个强大的特性，它允许函数访问并操作其外部作用域中的变量。

function createCounter() {
    let count = 0; // 私有变量
    
    return function() {
        count++; // 访问外部函数的变量
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2
console.log(counter()); // 输出: 3

闭包常用于创建私有变量和数据封装：

function createPerson(name) {
    // 私有变量
    let _age = 0;
    
    return {
        getName: function() {
            return name;
        },
        getAge: function() {
            return _age;
        },
        setAge: function(age) {
            if (age > 0 && age < 120) {
                _age = age;
            }
        }
    };
}

const person = createPerson("孙八");
person.setAge(30);
console.log(person.getName()); // 输出: 孙八
console.log(person.getAge()); // 输出: 30
// 无法直接访问_age变量

变量声明的最佳实践

根据不同场景选择合适的变量声明方式：

1. 使用const作为默认选择：如果变量不需要重新赋值，始终使用const
2. 需要重新赋值时使用let：只在变量值需要改变时使用let
3. 避免使用var：在现代JavaScript中，很少有理由使用var
4. 在循环中使用let：特别是在for循环中，let能确保每次迭代都有新的变量绑定

// 推荐的做法
const MAX_SIZE = 100; // 常量使用const
let currentSize = 0;  // 会变化的值使用let

// for循环中使用let
for (let i = 0; i < 5; i++) {
    setTimeout(() => console.log(i), 100); // 正确输出0,1,2,3,4
}

// 如果使用var，会有问题
for (var j = 0; j < 5; j++) {
    setTimeout(() => console.log(j), 100); // 输出5,5,5,5,5
}

变量声明与内存管理

不同的变量声明方式也会影响JavaScript的内存管理和垃圾回收：

• 块级作用域变量（let和const）在块执行完毕后可以被垃圾回收
• 闭包会保持对外部变量的引用，可能导致内存占用增加

function potentialMemoryLeak() {
    const largeData = new Array(1000000).fill('x');
    
    return function() {
        // 即使只使用了一次，largeData也会一直保存在内存中
        console.log(largeData.length);
    };
}

const leakyFunction = potentialMemoryLeak();
leakyFunction(); // largeData仍然存在于内存中

总结

JavaScript的变量声明和作用域规则是理解这门语言的基础。正确使用var、let和const，以及理解不同类型的作用域，可以帮助你编写更清晰、更可维护的代码，并避免常见的错误。

• var：函数作用域，存在变量提升，可重复声明
• let：块级作用域，有暂时性死区，不可重复声明
• const：块级作用域，必须初始化，不可重新赋值

在现代JavaScript开发中，推荐默认使用const，只在需要重新赋值时使用let，并尽量避免使用var。

练习

1. 编写一个函数，演示var、let和const在循环中的不同行为。
2. 创建一个闭包，实现一个计数器，可以增加、减少和重置计数值。
3. 尝试故意违反变量声明规则，观察JavaScript引擎如何报告错误。