浅谈JS数据类型存储问题

时间:2022-05-14 14:59:43
背景
 
    一个经典的问题,先抛出来给大伙看看:
var a = "黑MAO";
var b = a;
var c = new Object();
var d = c;
a = "新黑MAO";
c.age = 24;
//打印出结果是怎么样的呢?
console.log(a, b, c, d);
 
    上面先把问题出来,经过本文的梳理,之后再回头看看这个过程。
 
JS有哪些数据类型?
 
    JS包含量大数据类型,一种是基本数据类型(String、Number、Boolean、undefined、null);另外一种是引用类型(Object)
 
数据的存储方式有哪些?
 
  • 栈区:存放函数的参数值,局部变量的值(先进后出)
  • 堆区:由程序员分配释放,分配方式类似链表(任意顺序)
  • 全局区: 全局变量和静态变量
  • 文字常量区: 常量
  • 程序代码区:函数二进制码
 
JS中的基础类型和引用类型是怎么存储的?
 
    基础类型的数据存储在栈区,举一个简单的例子
    
var name = "黑MAO";
function hello(user) {
console.log('hello ' + user);
}
hello(name);
//这里只关注变量的存储
 
key
value
name
黑MAO
user
undefined

引用类型的数据存储在堆区,举一个例子

 
var a = new Object();
//由于堆区类似个链表,所以就用链表简单的表示一下
 
key
value
a
对象A地址
 
对象A的值:Object{}
...

另:堆区存储的数据是通过地址查找值,而不遵循队列或者栈的出入顺序

 
回顾
    回头看看文章刚开始的时候,抛出的那个问题。可以根据上面讲到的存储方式,复现一下从创建到赋值的一个过程。
var a = "黑MAO";
var b = a;
var c = new Object();
var d = c;
 
栈区存储结构:    
key
value
a
黑MAO
b
黑MAO
c
对象C地址
d
对象C地址
堆区存储结构:
对象C的值:Object{}
...
...
 
a = "新黑MAO";
c.age = 24;
 
栈区存储结构:
key
value
a
新黑MAO
b
黑MAO
c
对象C地址
d
对象C地址
 

堆区存储结构:

对象C的值:Object{age : 24}
...
...
console.log(a, b, c, d);
//新黑MAO 黑MAO Object{age: 24} Object{age: 24}
 
总结
    
    理清一些过程,便于在写代码的时候,更加高效并且没有错误。随时整理,也防止自己忘记~    
 
 
参考资料: