《深入理解 JavaScript 变量声明、作用域与内存分配》

多啦C梦a
325 阅读4分钟

在当今的现代前端开发领域，JavaScript 无疑占据着举足轻重的地位。自 ES6 标准问世以来，JavaScript 的功能和特性得到了极大的丰富与，尤其是在变量声明和作用域管理方面，发生了显著的变革。本文将深入剖析 const、let 和 var 这三种变量声明方式的区别，以及它们在内存分配过程中所扮演角色。

一、const 与 let 的引入

在 ES5 时代，JavaScript 仅支持使用 var 来声明变量，这种单一的声明方式引发了一系列问题。，存在变量提升现象，即 var 声明的变量会被提升到当前作用域的顶部；其二，使用 var 声明的变量会被挂载到全局对象 window 上，从而导致全局变量污染问题。为了解决这些弊端，ES6 引入了 const 和 let 这两种新的变量声明方式。

1. const

const 主要用于声明常量，一旦声明，其值通常不可重新赋值。

  • 简单数据类型：对于像 Number、String 这类简单数据类型，使用 const 声明后，其值无法被改变。例如：
const num = 10;
// 以下代码会报错，因为不能对 const 声明的简单数据类型重新赋值
// num = 20;
  • 复杂数据类型：当使用 const 声明 Object、Array 等复杂数据类型时，变量所指向的内存地址不可改变，但对象的属性或数组的元素是可以修改的。示例如下：
const obj = { name: 'John' };
obj.name = 'Jane'; // 可以修改对象的属性
// 以下代码会报错，因为不能改变 const 声明的变量指向的内存地址
// obj = { age: 25 };
2. let
  • 块级作用域：let 声明的变量具有块级作用域，仅在 {} 块内有效。这一特性避免了变量污染和意外修改的问题。
  • 暂时性死区：在使用 let 声明变量时，在声明之前访问该变量会抛出 ReferenceError，一现象被称为“暂时性死区”（Temporal Dead Zone, TDZ）。示例如下：
// 以下代码会抛出 ReferenceError，因为处于暂时性死区
// console.log(x); 
let x = 5;

二、内存分配

JavaScript 中的变量存储主要分为栈内存和堆内存，它们各自具有不同的特点和适用场景。

1. 栈内存

栈内存具有连续的空间，但空间相对较小，不过访问速度较快。简单数据类型的值会直接存储在栈内存中，这种存储方式使得对简单数据类型的访问非常高效，适合存储那些需要频繁操作的小数据。例如：

let a = 10; // 变量 a 的值 10 直接存储在栈内存中
2. 堆内存

堆内存的空间较大，但不连续，访问速度相对较慢。复杂数据类型的值会存储在堆内存中，而栈内存中则存储着指向堆内存的引用（指针）。这种存储方式使得堆内存能够容纳复杂的数据结构。示例如下：

let arr = [1, 2, 3]; // 数组 [1, 2, 3] 存储在堆内存中，变量 arr 存储的是指向堆内存的引用

三、var 的问题

在 ES5 中，使用 var 声明的变量会挂载到全局对象 上，这可能会导致全局变量污染和命名冲突的问题。而 ES6 引入的 let 和 const 通过块级作用域和暂时性死区的特性，有效地解决了这些问题。

四、块级作用域

块级作用域是 ES6 引入的一项重要特性，它使得变量仅在 {} 块内有效，避免了变量污染和意外修改。下面通过两个示例来对比 let 和 var 在块级作用域方面的差异。

1. 使用 let 的情况
for (let i = 0; i < 10; i++) {
    setTimeout(() => {
        console.log(i);
    }, 1000);
}

由于 let 声明的变量具有块级作用域，每次循环都会创建一个新的块级作用域，变量 i 的值只在该作用域下有效。因此，setTimeout 回调函数会保留 i 的所有值，最终结果是 1 秒后依次输出 0 - 9，每个数字输出间隔 1 秒。

2. 使用 var 的情况
for (var i = 0; i < 10; i++) {
    setTimeout(() => {
        console.log(i);
    }, 1000);
}

由于 var 不支持块级作用域，在整个函数作用域中，var 声明的变量 i 共享同一个作用域。在 setTimeout 回调函数中的所有 i 都指向同一个变量，而循环结束后 i 的值已经是 10，并没有像 let 声明的块级作用域那样被依次保留下来。所以，这段代码执行结果是 1 秒后，输出 10 个 10。

五、总结

ES6 的 const 和 let 通过块级作用域和暂时性死区，显著提升了 JavaScript 的变量管理能力。理解这些特性及其在内存分配中的作用，对于编写高效、可维护的代码至关重要。希望本文能帮助你更好地理解 JavaScript 的变量声明和作用域管理！

avatar
文章
阅读
粉丝