震惊！原来 const 对象可以修改？深入理解 ES6 变量声明的内存机制

爱学习的茄子
521 阅读4分钟

引言

JavaScript 的变量声明机制经历了从 ES5 到 ES6 的重大变革。在 ES6 之前，我们只能使用 var 来声明变量，这带来了变量提升、作用域混乱等问题。随着 JavaScript 在企业级应用中的广泛应用，ES6 引入了 let 和 const 关键字，这不仅解决了历史遗留问题，还引入了块级作用域的概念。本文将深入探讨这些新特性，并通过实例分析其工作原理。

一、ES6 变量声明的新特性

1.1 const 的本质

const 是 ES6 引入的常量声明关键字，它的特点是：

  • 简单数据类型：值不可改变
  • 复杂数据类型：值可以改变，但指向的内存地址不能发生改变

让我们通过一个具体的例子来理解：

const age = 18;
const friends = [
    {
        name: '吴彦祖',
        hometown: '上饶',
        collage: '湖南工业大学',
    },
    {
        name: '谢尔顿',
        hometown: '赣州',
    },      
];
// 可以修改对象内容
friends.push({
    name: '邓超',
    hometown: '宜春',
});

注意：这里有一个常见的误解，很多人认为 const 声明的对象完全不能修改，实际上它只是不能重新赋值，对象的内容是可以修改的。

1.2 引用式赋值

在 JavaScript 中，复杂数据类型采用引用式赋值（地址传递），而简单数据类型采用值传递：

const newFriends = friends;
newFriends.push({
    name: '宋仲基',
    hometown: '宜春',
});
newFriends.push({
    name: '严老板'
});

这里展示了 JavaScript 中一个重要的概念：引用式赋值。当我们使用 const newFriends = friends 时，实际上是将 friends 的引用地址赋值给了 newFriends，它们指向同一个内存空间。

二、内存管理机制

2.1 内存栈和堆

JavaScript 中的内存分为两种：

  • 内存栈：连续的内存空间，空间小，访问速度快
  • 内存堆：不连续的内存空间，空间大，访问速度慢

理解内存栈和堆的区别对于掌握 JavaScript 的变量机制至关重要。栈内存主要用于存储简单数据类型和引用地址，而堆内存则用于存储复杂数据类型。

2.2 const 的内存表现

无论是简单数据类型还是复杂数据类型，使用 const 声明时，内存栈中的值都不会发生改变：

  • 简单数据类型：值不可以修改
  • 复杂数据类型：引用的地址不可以改变

三、块级作用域的革命

3.1 解决变量提升问题

ES6 之前，JavaScript 只有函数作用域，这导致了变量提升（TDZ）的问题，影响了代码的可读性。let 和 const 的引入解决了这个问题：

// 循环中的块级作用域
for (let i = 0; i < 10; i++) {
    setTimeout(() => {
        console.log(i);
    }, 1000);
}

这个例子展示了块级作用域在循环中的应用。使用 let 声明的变量 i 在每次循环中都会创建一个新的作用域，这解决了使用 var 时常见的闭包问题。

3.2 避免全局污染

与 var 不同，let 和 const 声明的变量不会挂载到 window 对象上，这避免了全局变量的污染：

var globalVar = '全局变量';
let localVar = '局部变量';
console.log(window.globalVar); // '全局变量'
console.log(window.localVar); // undefined

四、ES6 的历史意义

ES6 的引入标志着 JavaScript 的一个重要转折点：

  • 早期 JS：主要用于设计页面交互，功能简单
  • ES6 之后：使 JS 成为企业级别的大型应用开发语言
  • 拥抱其他语言开发者：使 JS 的开发体验更接近 Java、C++ 等语言

这个转变不仅体现在语法特性上，更体现在 JavaScript 的定位和用途上。ES6 的引入使 JavaScript 真正成为了一门企业级的开发语言。

五、实际应用场景

5.1 循环中的变量声明

在循环中使用 let 可以创建独立的块级作用域，解决闭包问题：

for (let i = 0; i < 10; i++) {
    setTimeout(() => {
        console.log(i);
    }, 1000);
}

5.2 常量声明的最佳实践

使用 const 声明不会改变的引用，提高代码的可维护性：

const API_URL = 'https://api.example.com';
const DEFAULT_CONFIG = {
    timeout: 5000,
    retry: 3
};

六、性能优化建议

  1. 优先使用 const，除非变量需要重新赋值
  2. 使用块级作用域限制变量作用范围
  3. 避免在全局作用域使用 var
  4. 合理使用内存栈和堆的特性
  5. 注意复杂数据类型的引用式赋值特性

这些优化建议不仅能够提高代码的性能，还能提升代码的可维护性和可读性。

总结

ES6 的 let 和 const 不仅解决了 JavaScript 的历史遗留问题，还为大型应用开发提供了更好的支持。通过理解其内存管理机制和作用域特性，我们可以写出更安全、更高效的代码。这些新特性的引入，使 JavaScript 真正成为了一门企业级的开发语言。

参考资料

  1. ECMAScript 6 入门 - 阮一峰
  2. JavaScript 高级程序设计（第4版）
  3. MDN Web Docs - let 和 const
avatar
文章
阅读
粉丝