深入理解javascript系列(二):内存空间

因为javascript有GC存在，所以内存空间并不是被我们重视。王立大神说"理解内存空间，就是成为大牛的开始"。所以我们很有必要学习和理解内存空间。

2.1 基础数据类型与变量对象

最新的ECMAScript标准定义了7中数据类型，其中就包括6中基本数据与一种引用数据类型（object）

其中基础数据类型如图所示：

下面来探讨一个问题，有一个很简单的例子如下所示：

function fn() {var a1 = 10;var a2 = 'hello';var a3 = null;
}

现在需要思考的是当fn()的时候，局部变量a1它们都保存在什么地方？

函数运行时，会创建一个执行环境，这个执行环境叫做执行上下文（Execution Context）。在执行上下文中，会创建一个叫做变量对象（VO）的东西。基础类型都保存在这里了。

变量对象也存在与堆内存中，但是由于变量对象有特殊的功能，所以我们还是尽量将它与堆内存区别看待。

2.2 引用数据类型与堆内存空间

引用数据类型（Object）的值是保存在堆内存中的。但是我们之前也讲过，在javascript中，不允许直接操作堆内存。所以操作对象时，实际上是操作对象的引用。因此引用数据类型都是按引用访问的。这里的引用，可以理解为保存在变量对象中的一个地址，该地址与堆内存中的对象相关联。

为了更好地理解变量对象与堆内存，下面用一个例子与图解配合讲解。

function foo() {var a1 = 10;var a2 = 'hello';var a3 = null;var b = { m: 20};var c = [1,2,3];
}

再来重复一次。函数运行时，会创建一个执行环境，我们把这个执行环境称为执行上下文。在执行上下文中，会创建一个变量对象（VO）。基本数据类型的值往往都保存在变量对象中。

如下图所示，当我们想要访问堆内存空间中的引用数据类型时，实际上是通过引用（地址指针）来访问的。

在前端面试中，我们常常会遇到这样一个类似的问题。

//demo01.js
var a = 20;
var b = a;
b = 30;
console.log(a); // a ? 这时a的值多少

//demo02.js
var m = { a:10, b:20};
var n = m;
n.a = 15;
//这时m.a的值是多少？

当变量对象中的数据发生复制行为时，新的变量会被分配一个新的值。所以基本数据类型只是复制了一个，而引用数据类型了不光是复制了同一个引用地址，并且指向同一个地方。

2.3 内存空间管理

因为GC的存在，使得我们在开发时好像并不用那么关心内存的使用问题，内存的分配与回收完全实现了自动管理(但这并不代表他不会泄漏)。阳波大神说:“了解内存机制有助于自己清晰地认知到自己写的代码在执行过程中都发生了什么，从而写出更优秀的代码。”

var a = 20;
alert(a   100);
a = null;

上面的三条语句，分别对应如下三个过程。

1、分配内存；

2、使用分配到的内存

3、不需要时销毁内存

1与2都好理解。这里主要讲下3.

javascript的垃圾回收主要是依靠"引用"的概念。当一块内存空间中数据能够被访问时，垃圾回收器会认为他是能够“被获得的”。不能够被获得的数据，就会被打上标记，并且被回收内存空间，这种方式叫做标记-清除算法。

更多专业前端知识，请上【猿2048】www.mk2048.com