JavaScript 变量基础 —— 声明、赋值、作用域与同名注意事项

在 JavaScript 中，变量是存储数据的基本单元。理解如何声明和使用变量，以及它们的作用域规则，是掌握这门语言的基础。

本文将详细介绍 JavaScript 中变量的基本使用方法，包括声明、赋值、初始化及作用域等内容。

---

一、变量的声明

1. 使用 var 关键字（ES5 及更早版本）

var 是最早用于声明变量的关键字，但它有一些缺点，比如函数作用域和变量提升问题。

var x = 10;

2. 使用 let 关键字（ES6 引入）

let 提供了块级作用域，避免了 var 的一些陷阱。

let y = 20;

3. 使用 const 关键字（ES6 引入）

const 用于声明常量，即一旦赋值后就不能再改变其值（对于对象和数组来说，指的是引用地址不变）。

const z = 30;
// z = 40; // 错误：Assignment to constant variable.

---

二、变量的赋值与初始化

1. 直接赋值

let a = 5;
let b = "Hello";
let c = true;

2. 解构赋值（ES6 引入）

可以从数组或对象中提取数据并直接赋值给变量。

• 数组解构：

let [first, second] = [10, 20];
console.log(first); // 10
console.log(second); // 20

• 对象解构：

let obj = {name: "Alice", age: 25};
let {name, age} = obj;
console.log(name); // Alice
console.log(age); // 25

---

三、变量的作用域

1. 全局作用域

全局变量在整个程序范围内都有效。

var globalVar = "I'm global";

2. 函数作用域

使用 var 声明的变量具有函数作用域；而 let 和 const 则遵循块级作用域。

function testScope() {
    var funcVar = "Function scoped";
    console.log(funcVar); // Function scoped
}
console.log(funcVar); // ReferenceError: funcVar is not defined

3. 块级作用域

let 和 const 支持块级作用域，即 {} 内部定义的变量仅在该块内有效。

if (true) {
    let blockVar = "Block scoped";
    console.log(blockVar); // Block scoped
}
console.log(blockVar); // ReferenceError: blockVar is not defined

---

四、变量提升（Hoisting）与重复声明

使用 var 声明变量时，JavaScript 会进行变量提升（hoisting），即将变量声明提升到作用域顶部。

示例：

console.log(x); // 输出 undefined
var x = 5;

等价于：

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

⚠️ 即使变量在后面声明，也会被“提升”，但赋值不会提升。

同名变量提升行为：

var x = 10;
var x = 20;
console.log(x); // 输出 20

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

五、同名变量注意事项：作用域、覆盖与提升

关于同名变量的常见问题与注意事项，包括：

• 变量覆盖
• 作用域链
• 变量提升（hoisting）
• 函数参数与局部变量的冲突
• let / const 与 var 的差异

1. 变量覆盖（Variable Overwriting）

JavaScript 中如果在同一作用域中声明了两个同名变量，后面的变量会覆盖前面的变量。

示例：

let name = "Alice";
let name = "Bob"; // ❌ 报错（使用 let 时）

⚠️ 使用 let 或 const 时，重复声明会抛出语法错误。
✅ 使用 var 时，重复声明不会报错，但会覆盖之前的值。

var name = "Alice";
var name = "Bob";
console.log(name); // 输出 "Bob"

2. 作用域链（Scope Chain）与变量遮蔽（Shadowing）

在嵌套作用域中，如果子作用域声明了与父作用域同名的变量，则会“遮蔽”父作用域的变量。

示例：

let color = "red";

function changeColor() {
    let color = "blue";
    console.log(color); // 输出 "blue"
}

changeColor();
console.log(color); // 输出 "red"

✅ 子作用域中的 color 并不会影响全局作用域的 color。

3. 函数参数与局部变量冲突

函数参数和函数内部的局部变量如果同名，也会产生遮蔽行为。

示例：

function show(value) {
    let value = 42; // ❌ 报错（使用 let 时）
}

⚠️ 在严格模式下，使用 let 声明与函数参数同名的变量会抛出错误。
✅ 使用 var 时不会报错，但会遮蔽参数。

4. 全局对象上的同名属性（浏览器环境）

在浏览器中，使用 var 声明的全局变量会成为 window 对象的属性。

var name = "Alice";
console.log(window.name); // 输出 "Alice"

如果与已有 window 属性重名，可能会产生意想不到的副作用。

var location = "Beijing";
console.log(window.location); // ❌ 报错或不可预测行为（location 是 window 的只读属性）

项目	注意事项
var 重复声明	不报错，值会被覆盖
let / const	不允许重复声明，会抛出语法错误
作用域遮蔽	子作用域变量会遮蔽父作用域变量
函数参数与局部变量	不可使用 let 声明同名变量
变量提升	var 会被提升，但赋值不会
块级作用域	let / const 更安全，推荐使用
全局变量与 window 属性	避免与 window 上的属性同名

---

六、总结

关键字	作用域	是否可重新赋值	是否允许提升
var	函数作用域	是	是
let	块级作用域	是	否
const	块级作用域	否（但对于对象和数组，内容可以修改）	否

理解变量的声明方式及其作用域规则，可以帮助我们编写更加清晰、健壮的代码。