JavaScript 变量声明

变量是编程语言中最基本的概念之一，用于存储和操作数据。在 JavaScript 中，变量声明是一个重要的主题，因为它涉及到作用域、生命周期和内存管理等多个方面。在本章节中，我们将深入学习 JavaScript 中的变量声明方式及其特点。

变量声明的历史演变

JavaScript 的变量声明方式随着语言的发展而演变：

1. ES5 及之前：只有一种声明方式 var
2. ES6 (ES2015)：引入了 let 和 const
3. 现代 JavaScript：推荐使用 let 和 const，避免使用 var

var 声明

var 是 JavaScript 最早的变量声明方式，但它有一些特殊的特性，现在通常不推荐使用。

基本用法

var name = "张三";
var age = 25;
var isStudent = true;

// 可以声明多个变量
var x = 1, y = 2, z = 3;

// 可以先声明后赋值
var greeting;
greeting = "你好";

var 的特点

1. 函数作用域

function example() {
    if (true) {
        var x = 1;
    }
    console.log(x); // 1（可以访问）
}

example();

// 在块级作用域外无法访问
// console.log(x); // ReferenceError: x is not defined

2. 变量提升（Hoisting）

console.log(name); // undefined（不是报错）
var name = "张三";
console.log(name); // "张三"

// 上面的代码实际上等同于：
// var name;
// console.log(name); // undefined
// name = "张三";
// console.log(name); // "张三"

3. 可以重复声明

var a = 1;
var a = 2; // 不会报错
console.log(a); // 2

let 声明

let 是 ES6 引入的块级作用域变量声明方式，解决了 var 的一些问题。

基本用法

let name = "李四";
let age = 30;
let isEmployed = true;

// 可以声明多个变量
let x = 1, y = 2, z = 3;

// 可以先声明后赋值
let greeting;
greeting = "你好";

let 的特点

1. 块级作用域

function example() {
    if (true) {
        let x = 1;
    }
    // console.log(x); // ReferenceError: x is not defined
}

example();

2. 暂时性死区（Temporal Dead Zone）

console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = "李四";

// let 声明的变量在声明之前是不可访问的

3. 不可重复声明

let a = 1;
// let a = 2; // SyntaxError: Identifier 'a' has already been declared

4. 循环中的作用域

// 使用 var
for (var i = 0; i < 3; i++) {
    setTimeout(() => {
        console.log("var:", i); // 输出三次 "var: 3"
    }, 100);
}

// 使用 let
for (let j = 0; j < 3; j++) {
    setTimeout(() => {
        console.log("let:", j); // 输出 "let: 0", "let: 1", "let: 2"
    }, 100);
}

const 声明

const 用于声明常量，一旦声明就不能重新赋值。

基本用法

const PI = 3.14159;
const NAME = "王五";
const IS_ACTIVE = true;

// 必须在声明时初始化
// const AGE; // SyntaxError: Missing initializer in const declaration

const 的特点

1. 必须初始化

const name = "赵六"; // 正确
// const age; // 错误：必须初始化

2. 不可重新赋值

const MAX_SIZE = 100;
// MAX_SIZE = 200; // TypeError: Assignment to constant variable.

3. 块级作用域

if (true) {
    const MESSAGE = "Hello";
}
// console.log(MESSAGE); // ReferenceError: MESSAGE is not defined

4. 对象和数组的特殊情况

// 对象本身不可重新赋值，但属性可以修改
const person = { name: "张三", age: 25 };
person.age = 26; // 正确
console.log(person.age); // 26

// person = { name: "李四" }; // 错误：Assignment to constant variable.

// 数组也是如此
const numbers = [1, 2, 3];
numbers.push(4); // 正确
console.log(numbers); // [1, 2, 3, 4]

// numbers = [5, 6, 7]; // 错误：Assignment to constant variable.

声明方式的选择

现代 JavaScript 推荐做法

1. 优先使用 const：当变量不需要重新赋值时
2. 必要时使用 let：当变量需要重新赋值时
3. 避免使用 var：除非需要兼容老版本浏览器

// 好的做法
const userName = "张三"; // 不会改变
let userAge = 25;       // 可能会改变
userAge = 26;           // 正确

// 不推荐的做法
var oldStyle = "过时的写法";

实际应用示例

// 配置常量
const API_URL = "https://api.example.com";
const MAX_RETRY_COUNT = 3;

// 循环变量
for (let i = 0; i < 10; i++) {
    console.log(i);
}

// 条件变量
let isLoggedIn = false;
if (someCondition) {
    isLoggedIn = true;
}

// 对象引用
const config = {
    theme: "dark",
    language: "zh-CN"
};

// 可以修改属性
config.theme = "light";

变量提升（Hoisting）

变量提升是 JavaScript 执行上下文的工作方式。

var 的提升

console.log(a); // undefined
var a = 5;
console.log(a); // 5

// 实际执行顺序：
// var a;
// console.log(a); // undefined
// a = 5;
// console.log(a); // 5

let 和 const 的提升

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;

console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 15;

作用域（Scope）

作用域决定了变量的可访问范围。

全局作用域

const globalVar = "全局变量";

function example() {
    console.log(globalVar); // 可以访问
}

函数作用域

function outer() {
    var functionVar = "函数作用域变量";
    
    function inner() {
        console.log(functionVar); // 可以访问
    }
    
    inner();
}

块级作用域

{
    let blockVar = "块级作用域变量";
    const blockConst = "块级作用域常量";
    
    console.log(blockVar); // 可以访问
    console.log(blockConst); // 可以访问
}

// console.log(blockVar); // ReferenceError
// console.log(blockConst); // ReferenceError

变量命名规范

命名规则

// 正确的命名
let userName = "张三";
let $price = 99.99;
let _private = "私有变量";
let camelCase = "驼峰命名法";

// 错误的命名
// let 123name = "错误"; // 不能以数字开头
// let my-variable = "错误"; // 不能包含连字符
// let let = "错误"; // 不能使用保留关键字

命名约定

// 普通变量使用驼峰命名法
let firstName = "张";
let lastName = "三";

// 常量使用全大写字母和下划线
const MAX_SIZE = 100;
const DEFAULT_CONFIG = {
    theme: "light",
    language: "zh-CN"
};

// 私有变量以下划线开头（约定）
let _internalValue = "内部使用";

// 构造函数使用帕斯卡命名法
function UserManager() {
    // 构造函数体
}

变量声明的最佳实践

1. 使用 const 优先原则

// 好的做法
const users = [];
const config = {};

// 当需要重新赋值时使用 let
let currentUser = null;
if (isLoggedIn) {
    currentUser = getUserInfo();
}

2. 避免全局变量污染

// 不好的做法
var globalCounter = 0;

// 好的做法
const App = {
    counter: 0
};

// 或者使用模块
const counterModule = (() => {
    let counter = 0;
    
    return {
        increment() {
            counter++;
        },
        getValue() {
            return counter;
        }
    };
})();

3. 合理分组声明

// 相关的变量可以一起声明
const WIDTH = 800;
const HEIGHT = 600;
const ASPECT_RATIO = WIDTH / HEIGHT;

// 不相关的变量分开声明
const userName = "张三";
let userAge = 25;
const isLoggedIn = true;

总结

JavaScript 变量声明的要点：

1. 三种声明方式：

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

2. 现代推荐做法：

   • 优先使用 const，必要时使用 let
   • 避免使用 var

3. 作用域概念：

   • 全局作用域
   • 函数作用域（var）
   • 块级作用域（let、const）

4. 变量提升：

   • var 会提升声明但不提升赋值
   • let 和 const 会提升但存在暂时性死区

5. 命名规范：

   • 使用有意义的变量名
   • 遵循驼峰命名法
   • 常量使用全大写

掌握变量声明是学习 JavaScript 的重要基础。在下一章节中，我们将学习 JavaScript 的对象。