JavaScript变量声明与作用域详解
1. 变量声明方式
var (ES5及以前)
var username = "Alice";
var age = 30;
特性：
- 作用域限定在函数内
- 存在提升行为
- 可多次声明同一变量
let (ES6+)
let total = 5;
let status = false;
特性：
- 块级作用域
- 不会发生提升
- 禁止重复声明
- 引入暂时性死区
const (ES6+)
const GRAVITY = 9.81;
const BASE_URL = "https://api.demo.com";
特性：
- 块级作用域
- 声明时必须赋值
- 禁止重新绑定
- 对象和数组内容可变，引用不变
2. 变量声明示例
// 三种声明方式对比
var globalScope = "全局可见";
let blockScope = "块内可见";
const readOnly = "不可重新绑定";
// 先声明后赋值
let greeting;
greeting = "Hello World";
// 多变量同时声明
let x = 10, y = 20, z = 30;
// 常量对象示例
const user = {
name: "Bob",
age: 25
};
user.age = 26; // ✅ 允许，修改属性
// user = {}; // ❌ 错误，不能重新赋值
3. 作用域差异
// var函数作用域演示
function testVar() {
if (true) {
var val = 50;
}
console.log(val); // 输出 50，函数内任意位置可访问
}
// let/const块级作用域演示
function testBlock() {
if (true) {
let localVal = 100;
const fixedVal = 200;
}
// console.log(localVal); // ❌ 错误，localVal未定义
// console.log(fixedVal); // ❌ 错误，fixedVal未定义
}
4. 变量提升
// var的提升机制
console.log(declared); // 输出 undefined
var declared = "被提升了";
// 实际解析过程：
var declared;
console.log(declared);
declared = "被提升了";
// let/const无提升
// console.log(undeclared); // ❌ 错误
let undeclared = "未提升";
5. 最佳实践
// 1. 默认使用const
const APP_CONFIG = {
theme: "light",
locale: "en-US"
};
// 2. 需要变更时改用let
let index = 0;
index = 1;
// 3. 避免使用var
// ❌ 不推荐
var outdated = "古老写法";
// 4. 命名规范
const firstName = "Charlie"; // 驼峰式
const MAX_LIMIT = 999; // 常量用大写
6. 特殊情况与严格模式
// 未声明直接赋值（危险）
uninitializedVar = "将成为全局变量"; // 非严格模式
// 启用严格模式
"use strict";
// uninitializedVar2 = "value"; // ❌ 错误
// typeof安全检测
if (typeof possiblyUndefined === 'undefined') {
console.log(possiblyUndefined);
}
7. 综合对比表
// 特性对比
var:
- 作用域: 函数级
- 提升: 是
- 重复声明: 允许
- 初始化: 非必需
let:
- 作用域: 块级
- 提升: 否（暂时性死区）
- 重复声明: 禁止
- 初始化: 非必需
const:
- 作用域: 块级
- 提升: 否（暂时性死区）
- 重复声明: 禁止
- 初始化: 必须
8. 重要原则
- const永远作为首选，除非明确需要重新赋值
- let用于循环计数器和动态变量
- var应该完全避免使用
- 始终使用"use strict"模式
- 采用有意义且一致的命名规则
