JavaScript 运行原理解析

setTimeout有个要注意的地方，如上述例子延迟5s执行，不是严格意义上的5s，正确来说是至少5s以后会执行。因为Web API会设定一个5s的定时器，时间到期后将回调函数加到队列中，此时该回调函数还不一定会马上运行，因为队列中可能还有之前加入的其他回调函数，而且还必须等到Call Stack空了之后才会从队列中取一个回调执行。

所以常见的setTimeout(callback, 0) 的做法就是为了在常规的调用介绍后马上运行回调函数。

console.log('Hi'); 

setTimeout(function() { 

 console.log('callback'); 

}, 0); 

console.log('Bye'); 

// 输出 

// Hi 

// Bye 

// callback 

在说一个容易犯错的栗子：

for (var i = 0; i < 5; i++) { 

 setTimeout(function() { 

 console.log(i); 

 }, 1000 * i); 

} 

// 输出：5 5 5 5 5 

上面这个栗子并不是输出0，1，2，3，4，第一反应觉得应该是这样。但梳理了JS的时间循环后，应该很容易明白。

调用栈先执行 for(var i = 0; i < 5; i++) {...}方法，里面的定时器会到时间后会直接把回调函数放到事件队列中，等for循环执行完在依次取出放进调用栈。当for循环执行完时，i的值已经变成5，所以最后输出全都是5。

关于定时器又可以看看这篇有意思的文章

最后关于Event Loop，可以参考下这个视频。到目前为止说的event loop是前端浏览器中的event loop，关于Nodejs的Event Loop的细节阐述，请看我的另一篇文章Node.js design pattern : Reactor (Event Loop)。两者的区别对比可查看这篇文章你不知道的Event Loop，对两种event loop做了相关总结和比较。

总结

最后总结一下，JS的运行原理主要有以下几个方面：

JS引擎主要负责把JS代码转为机器能执行的机器码，而JS代码中调用的一些WEB API则由其运行环境提供，这里指的是浏览器。

JS是单线程运行，每次都从调用栈出取出代码进行调用。如果当前代码非常耗时，则会阻塞当前线程导致浏览器卡顿。

回调函数是通过加入到事件队列中，等待Event Loop拿出并放到调用栈中进行调用。只有Event Loop监听到调用栈为空时，才会从事件队列中从队头拿出回调函数放进调用栈里。

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!