从一道面试题入手搞清js的堆栈

概念性的东西先放在前边

简单说下堆和栈

堆(heap)动态分配的内存，大小不定也不会自动释放。
栈(stack)会自动分配内存空间，会自动释放，弹夹模型后入先出（EvenLoop基础这里先不说）。

V8引擎由两个主要部件组成:

emory Heap(内存堆) — 内存分配地址的地方
Call Stack(调用堆栈) — 代码执行的地方，也叫执行栈

引用数据类型会被存放到堆中，为新的变量赋值实际上被赋予的就是这个内存的地址，而不是实际的值；执行过程中会把相关的引用放在执行栈中；
例如：

	var obj = {}//声明了一个对象，内存地址为aaafff000
	var obj1 = obj;//这里并不是创建了一个新的空对象，而是吧obj内存地址赋过来使obj1也指向aaafff000
	//其中obj1=aaafff000就保存在执行栈中

上经典面试题

	var test = (function(i){
		return function(){
			alert(i*=2)
		}
	})(2)
	test(5)

运行的顺序是

1. 声明一个变量test;
2. 函数执行，把函数压入栈
3. 形参赋值i = 2;
4. 执行结果是return了一个函数；
5. 开辟一个新的堆存入函数保存的值是函数执行代码的字符串‘alert(i*+2)’
6. return 函数的堆地址返回给test
7. 创建新的执行栈，用来执行test(5)
8. 执行alert(i*=2)在当前执行栈中找不到，向上级栈查找；
9. 在上级栈中检索到i=2；
10. 弹出4
    

参考

js中的堆栈
js堆栈原理
什么是eventloop-阮一峰

小工具

通过这个页面可以清晰的看到js运行时都发生了些什么，如果觉得太快或者想知道怎么实现的，里边也贴了git地址，缺点就是比较老了最后一次提交还是6年前了。
latentflip.com