大家好我是曲灵风，前几天在youtube上看到一哥们讲解js运行原理的东东，感觉讲解的很透彻啊(我都可以理解了)，遂记录下来，以便下次查看，若理解有不到位的地方，欢迎大家狠狠拍砖。
先上第一张图:
js的 Runtime.png
这里堆(heap)的作用是分配内存大小。
而栈(stack)是处理上下文环境的地方，也就是执行代码的地方。
通过执行可以发现：一些普通的函数可以从stack中执行，然而另外一些函数并没有在stack中执行，比如:setTimeout或者HTTP request，接下来看第二张图解答。
js 的detail Runtime.png
下面通过问答的形式回答这些问题，感觉这种形式还是挺好的。
- 为什么setTimeout或者HTTP request这些东西没有和其他函数一样直接在stack中执行呢?
上面这位看官提了个好问题，原因是: 这些东西会使程序运行阻塞，因而Chrome浏览器会把一些阻塞的东西拿出来在别的地方执行。
- 那么setTimeout或者HTTP request是在什么地方执行的？
setTimeout或者HTTP request等函数是在web APIs中运行的。这位看官可能又问了，这个web APIs是个什么东东?
这个web APIs是由Chrome提供的，类似于java的线程池机制，有很多线程可以调用，js虽然是单线程的，但是里面的web APIs却是多线程，这里的机制和Node是类似的，只不过Node中这里是由C++封装的。
- 好像还没完呢，
web APIs执行完成之后如何把获得数据传给调用栈呢？
原来是每个web APIs执行的函数，都有一个回调函数，然后这些相应的回调函数会按照每个异步函数(我们暂时把在webAPs中执行的函数称为异步函数)执行的快慢放到callback queue中，然后待stack清空之后，每次从callback queue中取出一个(对，只是一个不是两个三个)，放到stack中执行，最后完成代码的执行。
现在又有看官问了，你嘟囔了这么多，你说的到底对不对啊?
对不对验证一下就行了，直接上代码。
function foo() {
throw new Error('Oops');
}
function bar() {
foo();
}
function baz() {
bar();
}
baz()
运行之后看结果
/usr/local/bin/node test.js
/Users/zhangwenning/git/jfjun-cw/test.js:5
throw new Error('Oops');
^
Error: Oops
at foo (/Users/zhangwenning/git/jfjun-cw/test.js:5:11)
at bar (/Users/zhangwenning/git/jfjun-cw/test.js:9:5)
at baz (/Users/zhangwenning/git/jfjun-cw/test.js:13:5)
at Object.<anonymous> (/Users/zhangwenning/git/jfjun-cw/test.js:16:1)
看Error日志，错误日志打印的顺序竟然就是函数调用出栈的顺序，这还真不是偶然，看来函数进stack的理论得到了证明。
各位看官还可以通过这个哥们写的模拟V8引擎来实践一下。
另外再说一句:foo，bar， baz到底是什么意思，怎么老美的程序员经常使用这几个单词?其实这几个单词还真没什么意思，这几个单词就相当于中国的张三李四这样举例子。
前方高能，有两个面试题。
问题一:
console.log('hi');
setTimeout(function(cb){
console.log('there')},
0);
console.log('JSConf');
代码运行结果是:
hi
JSConf
there
原因是setTimeout是异步调用，当代码执行后，hi和JSConf依次打印出，但是浏览器一看setTimeout是异步调用，浪费时间，阻塞主进程，所以把它放到web APIs中执行，在web APIs中一看是0s后执行，那就直接把function(cb)放到callBack queue中，但是function(cb)还是等到主stack清空才执行，因此there最后打印出来。
问题二:
这个是关于Node的。
setTimeout(function timeout() {
console.log('TIMEOUT FIRED');
}, 0);
process.nextTick(function A() {
console.log(1);
process.nextTick(function B(){console.log(2);});
});
代码运行结果是:
1
2
TIMEOUT FIRED
process.nextTick()方法调用发生在当前"执行栈"的尾部，Event Loop触发回调之前，而setTimeout要等到执行栈清空之后才可执行，所以先要执行process.nextTick函数，最后执行setTimeout函数。
最后，送给大家一首郭德纲的定场诗放松一下。
金山竹影几千秋，云锁高飞水自流。
万里长江飘玉带，一轮明月滚金球。
远至湖北三千里。近到江南十六州。
美景一时观不尽，天缘有份画中游。
网友评论