盘点 JavaScript 运行机制：简单类型和复杂类型

回顾

上一篇中我们聊了聊 js 的字符串对象，手写了常用的字符串操作方法，有些方法和数组对象是非常类似的，很容易记起来。除此之外还知道了一个重要的概念，字符串所有的方法都是不可变的（不会修改值本身），操作完成之后会返回一个新值。

这一篇中纯粹是一个概念性的文章，对 js 中的简单类型和复杂类型做一个简要的概述

简单类型和复杂类型

在 js 中简单类型又叫做基本数据类型或值类型，复杂数据类型又叫做引用类型

• 值类型：简单数据类型/基本数据类型，在存储变量中存储的是值本身，因此叫做值类型。

// 基本数据类型StringNumberBooleanundefinednull

null 是一个例外

不过在简单数据类型当中还有一个“特殊”的值：null，在编辑器中如果用 typeof 检测的话 null 值会出现 object。这是因为早期的 javascript 设计上有缺陷所以导致了这个 bug 一直存在，不过中期的时候 es 机构讨论过是否修改，但是考虑到历史的原因就不更改了。

// 简单类型中的 null 返回的是一个空的对象 Objectvar type = nullconsole.log(typeof type); // object

• 引用类型：复杂数据类型，在存储时变量时存储的仅仅是内存中的地址（引用），因为叫做引用数据类型，通过 new 关键字创建的对象

ObjectArrayDate

堆和栈

• 栈（操作系统）：由操作系统自动分配释放存储存放函数的参数值，局部变量的值等，其操作方式类似于数据结构中的栈。简单数据类型存放在栈里面

• 堆（操作系统）：存储复杂数据类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收复杂数据类型存放到堆里面

注意：在刚开始的学习中仅指导这些概念就可以了。初步学习了解概念，然后在往后的过程中可以慢慢延申到操作系统和计算机网络相关的知识点。之后再读高级程序设计等书籍会好深入了解一些。

其实 js 实际上是没有堆栈的概念的，不过是通过堆栈的方式能加深一些理解。但是 js 也是 C 语言写的，间接上也可以有堆栈的概念。

简单和复杂类型的内存分配

• 简单类型的内存分配：上述写道在简单数据类型中直接存放到栈里面，栈里面会开辟一个空间存放简单类型的值

• 复杂数据类型的内存分配：复杂数据类型首先在栈里面存放地址，然后将这个地址指向堆里面的数据。

简单数据类型传参

自己联想一下这个 js 题输出的是什么

function fn(a) {  a++  console.log(a);}var x = 10fn(x)console.log(x);

在简单数据类型当中，可以理解为 var 声明的 x 是一个值，将值传递在方法中 a++ 之后又生成了一个值。内存中相当于存在两个值。所以输出 11，10

复杂数据类型传参

自己可以先想一想，在复杂数据类型传参下面输出什么

// 复杂数据类型传参function person (name) {  this.name = name}
function fn (x) {  console.log(x.name);  x.name = '晴天'  console.log(x.name);}
var p = new person('花海')
console.log(p.name);fn(p)console.log(p.name);

在复杂数据类型中，函数的形参也可以看做是一个变量，当我们把引用类型变量传给参数时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一堆地址，所以操作是同一个对象。

好了，今天的内容就结束了，可以自己在编辑器中多敲一敲，打上断点看看。有问题欢迎随时留言~