JavaScript基础教程（十二）语法之变量：变量魔法，深入JavaScript变量机制与现代写法

最新推荐文章于 2025-11-26 17:11:00 发布

原创最新推荐文章于 2025-11-26 17:11:00 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

JavaScript基础教程专栏收录该内容

91 篇文章

订阅专栏

在JavaScript中，变量是我们存储和操作数据的容器，但它们的行为远比表面看起来复杂。

变量声明：三种方式的选择

var name = "小明"; // 函数作用域
let age = 25;     // 块级作用域
const PI = 3.14;  // 块级作用域常量

变量提升的陷阱

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

console.log(y); // 报错：暂时性死区
let y = 10;

var声明的变量会被提升到作用域顶部，但只提升声明而非赋值。let和const虽然也有提升，但存在暂时性死区，在声明前访问会报错。

作用域链的奥秘

function outer() {
    let outerVar = "外部";
    
    function inner() {
        console.log(outerVar); // 可以访问外部变量
        let innerVar = "内部";
    }
    
    console.log(innerVar); // 报错：无法访问内部变量
}

原始值与引用值的区别

let a = 10;
let b = a; // 值复制
b = 20;
console.log(a); // 10，不变

let obj1 = { value: 10 };
let obj2 = obj1; // 引用复制
obj2.value = 20;
console.log(obj1.value); // 20，改变了

现代JavaScript的最佳实践

// 使用const作为默认选择
const user = {
    name: "张三",
    age: 30
};

// 需要重新赋值时使用let
let count = 0;
count++;

// 解构赋值简化变量声明
const { name, age } = user;

理解JavaScript变量的工作机制是掌握这门语言的关键。选择合适的声明方式、理解作用域和提升机制，能够帮助你写出更可靠、易维护的代码。在现代JavaScript开发中，优先使用const，必要时使用let，避免使用var，已经成为行业共识。