大家好我是曲灵晓风,前几天在youtube上看到一哥们讲解js运行原理的东东,感觉讲解的很透彻啊(我都可以理解了),遂记录下来,以便下次查看,若理解有不到位的地方,欢迎大家狠狠拍砖。

这里堆(heap)的作用是分配内存大小。
而栈(stack)是处理上下文环境的地方,也就是执行代码的地方。
通过执行可以发现:一些普通的函数可以从stack中执行,然而一些函数没有在stack执行,比如:setTimeout或者HTTP request,接下来看第二张图解答。

下面通过问答的形式回答这些问题,感觉这种形式还是挺好的。
- 为什么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
中执行了,然而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触发回调之前,就是在callback queue 的头部插入这个回调函数,而setTimeout要等到执行栈清空之后才可执行,
最后,送给大家一首郭德纲的定场诗放松一下
金山竹影几千秋,云锁高飞水自流。
万里长江飘玉带,一轮明月滚金球。
远至湖北三千里。近到江南十六州。
美景一时观不尽,天缘有份画中游。