浅谈JS数据类型存储问题

背景

 

    一个经典的问题，先抛出来给大伙看看：

    

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}

 

总结

    

    理清一些过程，便于在写代码的时候，更加高效并且没有错误。随时整理，也防止自己忘记~    

 

 

参考资料：

 

http://blog.jobbole.com/81010/

http://blog.jobbole.com/81011/

http://blog.jobbole.com/81018/