异步的JavaScript

   <h2>引子</h2>    <p>前几天学校的交流群里面讨论JavaScript回调函数，有个同学提出了一个观点：回调函数就是异步执行的!</p>    <p>看到这个观点，我想了想我使用回调函数的场景，还真都是异步的，一时竟觉得他说得很有道理。</p>    <p>当然，这句话本身，当然是 <strong>错的</strong> ，在JavaScript中函数作为一等公民，可以在任何地方定义，在函数内或函数外，可以作为函数的参数和返回值，基于这个基本事实，就可以写出高阶函数。</p>    <p>接受或者返回一个函数的函数称为高阶函数</p>    <p>常用的内置高阶函数例如Array对象的forEach,map等， <a href="/misc/goto?guid=4959756033772753213" rel="nofollow,noindex">函数组合</a> ， <a href="/misc/goto?guid=4959756033873016896" rel="nofollow,noindex">函数柯里化</a> ，回调模式都属于高阶函数。实际上，JavaScript是有能力进行函数式编程的（ <a href="/misc/goto?guid=4959756033958041580" rel="nofollow,noindex">FED关于函数式编程的文章</a> ），这里就不深入讨论了。</p>    <p>有点扯远了，回到刚刚那个同学观点，和明显，用forEach遍历一下数组，并不是异步的，那么为什么提到回调函数的时候，很容易和异步联系起来呢？这个问题引起了我的思考，回调和异步到底有什么样的渊源呢？</p>    <h2>单线程的JavaScript</h2>    <p>说起异步，就要先说说JavaScript运行机制。我们知道，JavaScript是单线程执行的，意味着同一个时间点，只有一个任务在运行。单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。</p>    <p>从诞生起，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。</p>    <h2>为什么需要异步？</h2>    <p>单线程的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。</p>    <p>为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。</p>    <p>关于异步处理，现在已经有了许多好的解决方案。如果想全面了解如何处理异步，@肖鸡已经写了一篇非常全面的文章JS中异步的解决方案。</p>    <h2>JavaScript执行机制</h2>    <p>在谈异步之前，先来说说JavaScript的执行机制，看下面这段代码</p>    <pre>  function foo () {      return foo();  }  foo();    // Uncaught RangeError: Maximum call stack size exceeded</pre>    <p>这代码里面抛出了一个错误，意思是超过最大调用堆栈大小，那么这个call stack是什么呢？</p>    <p>call stack：执行JavaScript的主线程分为heap和stack，stack是一个执行环境上下文。</p>    <p><a href="/misc/goto?guid=4959756034044018060" rel="nofollow,noindex">stack</a> 是一种数据结构，数据先入后出，后入先出。执行JavaScript的call stack，也是如此。</p>    <p><img src="https://simg.open-open.com/show/cd88ce56e8b6dd41577b3a19e3c26815.png"></p>    <p>从上图的例子可以看出调用栈的变化</p>    <p>main(js文件可以视作一个main函数) -> printSquare(内部调用了square，因此需要把square推入栈中) -> square(内部调用了multiply，推入栈中) -> multiply</p>    <p>此时所依赖的函数都在栈中，那么可以执行了，执行顺序和栈是一致的，后入先出（执行），所以顺序为</p>    <p>multiply -> square -> printSquare。</p>    <p>call stack也是有最大限制的，可以使用下面的代码测试一下浏览器的最大call stack size</p>    <pre>  var i = 0;  function inc() {      i++;      inc();  }  inc();  //VM202:2 Uncaught RangeError: Maximum call stack size exceeded  i // 15720</pre>    <p>理解JavaScript的函数调用方式，对于理解递归，高阶函数，异步函数等都是非常有帮助的。</p>    <p>以递归为例，递归函数不断调用自身，那么就会不断向call stack中推入函数，直到达到递归条件（此时函数不再调用自身），然后再按后进先出的原则依次执行stack中的函数。</p>    <h2>异步的实现</h2>    <p>异步的实现我分为三部分来理解：webApi，任务队列，event loop</p>    <h3>webApi</h3>    <p>先来列举一下JavaScript中的异步任务，现在先限定在浏览器中，可以得出以下结果：</p>    <ol>     <li> <p>dom事件</p> </li>     <li> <p>定时器setTimeout,setInterval</p> </li>     <li> <p>XMLHttpRequest</p> </li>    </ol>    <p>可以发现，这些都是都是浏览器的一些api，也就是webApi。其实异步的实现是浏览器来处理的，主线程并不用管异步时如何实现的。</p>    <p>事实上，浏览器是多进程的，所以可以开多个线程来处理异步行为，并在任务完成时同步到任务队列</p>    <h3>任务队列</h3>    <p>看下面这段代码，setTimeout指定的函数0ms后输出，但是最后才执行</p>    <pre>  console.log(1);  setTimeout(() => {console.log('after 0ms')} ,0);  console.log(2);  console.log(3);    // 1  // 2  // 3  // after 0ms</pre>    <p>因为setTimeout的函数经过webApi，0ms后定时器执行并将回调函数放到task queue，当call stack中的代码执行完毕时，主进程不断查看task queue中的任务，如果有任务就取出并放到call stack中执行。</p>    <p>setTimeout的定时是不准确的，因为当前call stack执行任务时，定时器的回调就会一直在task queue中等待</p>    <p><img src="https://simg.open-open.com/show/3827d59fb8ad7a2513b703a5020a321c.png"></p>    <p>对于其他的异步api，如dom事件，ajax请求等，都是同样的原理，当异步事件执行完毕，就会把相应的回调函数放到task queue中。</p>    <p>task queue中的任务需要反复轮询，查看是否有任务已完成，这个轮询就是event loop</p>    <h3>Event loop</h3>    <p>event loop经常用类似如下的方式来实现</p>    <pre>  while (queue.waitForMessage()) {    queue.processNextMessage();  }</pre>    <p>如果当前没有任何消息queue.waitForMessage 会等待同步消息到达。</p>    <h2>异步和回调的关系</h2>    <p>说到现在，异步和回调的关系已经很明确了。</p>    <p>异步：通过webApi创建异步任务。任务完成时，如果有指定了回调函数，将回调函数放入task queue中；如果没有指定回调函数，这个事件就被丢弃。</p>    <p>回调函数：定义了异步任务完成时所要执行的操作，包括事件和定时器所指定的异步任务。</p>    <h2>避免同步阻塞的代码</h2>    <p>像深度循环，同步的ajax请求等任务会非常耗时，主线程有代码执行时，task queue中的代码就会一直处于等待状态，此时浏览器无法进行任何交互和操作，页面就相当于挂掉了。</p>    <h2>nodeJS中的异步</h2>    <p>node作为一个事件驱动，无阻塞IO的运行时，也是使用了事件循环。但是node和浏览器的实现有很多不同，下次可以再水一篇node文章（逃</p>    <p> </p>    <p>来自：https://webfe.kujiale.com/yi-bu-de-javascript/</p>    <p> </p>