[JS]JavaScript一张图引发的深思

最新推荐文章于 2025-09-12 13:20:46 发布

原创最新推荐文章于 2025-09-12 13:20:46 发布 · 401 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

6 篇文章

订阅专栏

JavaScript

5 篇文章

订阅专栏

本文解析了JavaScript中基本数据类型与引用数据类型的存储方式，解释了栈内存与堆内存的区别，以及==与===运算符在类型比较上的差异。

很早以前在掘金沸点看到一张图，很有意思就发了朋友圈。结果很多朋友问我为什么。
（好吧，其实我只是不知道这周写什么内容了）。
就围绕这张图，我们扒扒JavaScript的基本数据类型和引用数据类型、栈内存和堆内存、==和===的区别。

为什么！

因为var a和var b是引用类型，它们在栈内存中存放地址指针，在堆内存中存放值;而var c是JavaScript的基本数据类型，String类型，所以它直接在栈中存放值。

var a=[1,2,3];
console.log(a.toString());     //"1,2,3"
a.toString()==c;   //true

当a==c;的时候，因为==比较的时候，会将两个比较的值转换为同一类型进行比较是否相同，所以在比较的时候其实var a会被调用toString（）的方法，其结果为："1,2,3"；然后将var a再与var c进行比较。结果返回当然是true。

当b==c的时候，同上。

当a==b的时候，因为var a和var b都是引用类型，所以当它们==比较的时候，比较的是它们栈内存中的地址是否相同。而因为它们各自的地址不同，结果当然是返回false。

知识点补充包

我们粗略的知道了为什么会呈现出图片中的结果。但有的童鞋可能没有相关的知识储备，看的比较吃力。所以我们来补充下这张图所涵盖的知识点。

5种基本数据类型和引用数据类型

栈内存和堆内存

JavaScript中的5种基本数据类型包括：

1、String

2、Number

3、Boolean

4、Undefined

5、Null

基本数据类型，因为它们占用的存储空间有固定的大小，所以直接存储在栈内存中。基本类型在当前执行环境结束时销毁。

而除了以上的基本数据类型以外，都是引用数据类型，例如：数组Array，Object类型，Function类型。而引用类型不会随执行环境结束而销毁，只有当所有引用它的变量不存在时这个对象才被垃圾回收机制回收。

var a;
var b;
function fun(){
    var c=[1,2,3];
    var d="hello";  //基本数据类型
    a=c;         //将c的地址，赋值给a
    b=d;        //将d的值赋值给b
}
fun();
a;             //Array(3) [ 1, 2, 3 ],此时因为变量a还引用着c的值，所以在堆内存中c的值还未被回收
b;             //"hello",此时b是直接将d的值复制过来，因为b是String类型，是基本数据类型，b直接将值"hello"存储在栈内存中，而d的值在方法执行完以后，已经被销毁。