JavaScript 基本数据类型与引用数据类型的区别及内存分配机制

JavaScript 数据类型概述

本文通过实例深入解析JavaScript的数据类型体系，重点区分基本数据类型与引用数据类型，并剖析它们在堆内存和栈内存中的存储差异，旨在为读者提供清晰的参考。

JavaScript的数据类型主要分为基本数据类型和引用数据类型两大类。文章末尾将补充各类数据的基础知识及使用时的注意事项。

基本数据类型指的是存储在简单数据段中的值，而引用数据类型则是由多个值构成的对象。

在将变量赋值给另一个变量时，解析器首先需判断该值是基本类型值还是引用类型值，这决定了后续的内存操作方式。

基本数据类型包括：数字（Number）、字符串（String）、布尔值（Boolean）、空值（Null）以及未定义（Undefined）。

引用数据类型通常指对象类型（Object type），常见的包括 Object、Array、Function 和 Date 等。

基本数据类型与栈内存机制

基本数据类型详解

基本数据类型的值是按值访问的，因为可以直接操作保存在变量中的实际数值。

var a = 1;
var b = a;//b获取的是a值得一份拷贝，虽然，两个变量的值相等，但是两个变量保存了两个不同的基本数据类型值
b = 2;
console.log(a); // 1

当执行 b = a 时，b 仅保存了 a 值的一份副本。尽管两个变量的初始值相等，但它们是两个独立的基本数据类型值。因此，修改 b 的值不会影响 a。

下图演示了这种基本数据类型赋值的过程：

栈（stack）由系统自动分配内存空间并自动释放，主要用于存放基本类型数据。这些数据占据固定大小的空间。

在方法中定义的变量通常存放在栈内存中。随着方法的执行结束，该方法的内存栈也会自然销毁。

栈内存的优点是存取速度较快，仅次于 CPU 寄存器，且数据可以共享；缺点在于栈中数据的大小和生存期必须是确定的，缺乏灵活性。

需要注意的是，栈支持方法的递归调用。随着栈深度增加，JVM 会维持一条长长的方法调用轨迹，若内存不足分配，则会产生栈溢出错误。

引用数据类型与堆内存机制

引用类型数据详解

JavaScript 中的引用数据类型对象保存在堆内存中。

与其他语言不同，JavaScript 不允许直接访问堆内存中的位置，也不能直接操作堆内存空间。开发者只能操作对象在栈内存中保存的引用地址。

因此，引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址，可以快速定位到堆内存中对应的对象。

var obj1 = new Object();
var obj2 = obj1;
obj2.name = "叶落森";
console.log(obj1.name); //叶落森

这说明两个引用数据类型变量指向了同一个堆内存对象。当 obj1 赋值给 obj2 时，实际上是复制了一份栈内存中的引用地址给 obj2，但它们共同指向堆内存中的同一个对象。此时改变的是堆内存中的对象内容（这也涉及深拷贝与浅拷贝的概念，此处为浅拷贝，具体区别见前文关于堆栈区别的讨论）。

下面演示引用数据类型的赋值过程：

各数据类型基础及注意事项

各类型的基础知识及注意事项

1. Number 类型

Number 类型包含整数和浮点数两种值。注意，浮点数数值必须包含一个小数点，且小数点后面至少有一位数字。

NaN（Not a Number）表示非数字类型。其特点包括：① 任何涉及 NaN 的操作都会返回 NaN；② NaN 不等于其自身。

isNaN() 函数用于检查其参数是否是非数字值。

isNaN(123) //false
isNaN("hello") //true

2. String 类型

字符串具有 length 属性，用于获取字符串长度。

字符串转换方式包括：转型函数 String()，适用于任何数据类型（null 和 undefined 转换后仍为 null 和 undefined）；以及 toString() 方法，但 null 和 undefined 没有 toString() 方法。

3. Boolean 类型

该类型仅包含两个值：true 和 false。

4. Undefined 类型

该类型只有一个值，即 undefined。如果使用 var 声明变量但未初始化，该变量的值即为 undefined。

5. Null 类型

null 类型被视为空对象指针。前文提到，null 类型也是空的对象引用。

6. Object 类型

JavaScript 中的对象是一组属性与方法的集合。这里涉及引用类型的概念，引用类型是一种数据结构，用于将数据和功能组织在一起。引用类型有时也被称为对象定义，因为它们描述的是一类对象所具有的属性和方法。

感兴趣的朋友可以使用在线 HTML/CSS/JavaScript 代码运行工具：http://tools.jb51.net/code/HtmlJsRun 测试上述代码的运行效果。

更多关于 JavaScript 相关内容感兴趣的读者可查看本站专题：《JavaScript 数学运算用法总结》、《JavaScript 数据结构与算法技巧总结》、《JavaScript 数组操作技巧总结》、《JavaScript 排序算法总结》、《JavaScript 遍历算法与技巧总结》、《JavaScript 查找算法技巧总结》及《JavaScript 错误与调试技巧总结》。

希望本文所述对大家理解 JavaScript 程序设计有所帮助。