JavaScript 的运行机制

运行栈

JavaScript 的执行环境是单线程的，所谓单线程，就是每次都只能做一件事，后面的事必须等前面的执行完才可以进行。

console.log(1);
console.log(2);
console.log(3);
console.log(4);
// 1， 2， 3， 4

但是这有一个弊端，如果中途遇到某个操作长时间无法执行完成，那么后面的任务就必须排队等待，这严重影响了整个执行过程，会导致浏览器无响应。

为了解决这个问题，JavaScript 将任务分为了同步 和异步 两种。

我们写的代码一般都是同步代码，如：console.log，变量赋值，for 循环等。

哪些是异步操作 ？

• 定时器：setTimeout、setInterval

• 事件绑定

• ajax 请求数据一般是异步操作，当然也可以同步

• promise

• saync await

• 读写文件

当遇到异步任务时，会将异步任务放到任务队列中，等到整个运行栈中的内容执行完后再去执行任务队列中的内容。

<script type="text/javascript">
	console.log(1)newPromise((resolve)=>{resolve();}).then(()=>{
		console.log(3);})setTimeout(()=>{
		console.log(2)},0)

	console.log(4)// 1， 4， 3， 2newPromise((resolve)=>{resolve(5);}).then((data)=>{
		console.log(data);})</script>

上面的代码中，首先输出 1。

然后遇到 promise， promise 是一个异步操作，会将.then 中的内容放到 任务队列中。

setTimeout 也是一个异步操作， 虽然这里延迟时间是 0 毫秒，但是并不会马上执行。

然后继续执行输出 4。

整个运行栈结束后，去执行任务队列中的任务，首先输出 3， 再输出 2。

任务队列

上面我们知道了任务队列中存放的都是异步任务，他们按照放入的顺序进行排列，但是异步任务会被分为了两大类：

微任务：promise.then()、async await

宏任务：setTimeout、setInterval、事件绑定、ajax、读写文件

微任务在宏任务之前执行，即使微任务在宏任务之后才被加入到任务队列中。

还是上面的例子，我们把 setTimeout 与 Promise 的顺序进行调整：

<script type="text/javascript">
	console.log(1);setTimeout(()=>{
		console.log(2);},0);newPromise((resolve)=>{resolve();}).then(()=>{
		console.log(3);});

	console.log(4);// 1， 4， 3， 2</script>

可以得到一样的结果，说明 Promise.then（） 在 setTimeout 之前执行了。

事件轮询

上面说到，同步任务执行完成后，会去执行异步任务，那如果异步任务执行完成后，是不是整个过程就结束了？

当然不是，在执行异步任务时，异步任务中的代码同样可能包含新的同步任务与异步任务，过程还是一样的，按照顺序执行，遇到异步任务，会将异步任务放入到一个新的 任务队列 中。

当任务队列中的所有任务执行完成后，又会重新去执行新的 任务队列 中的内容，即使 任务队列 中没有任务任务，这个过程也会无线的循环下去，这就是 事件轮询 。

<script type="text/javascript">
	console.log(1);setTimeout(()=>{
		console.log(2);},100);newPromise((resolve)=>{resolve();}).then(()=>{
		console.log(3);newPromise((resolve)=>{
			console.log(4);resolve();}).then(()=>{
			console.log(5);})})
	console.log(6);// 1，6, 3，4，5，2</script>

setImmediate 与 process.nextTick

setImmediate 和 process.nextTick 也是异步任务，为什么要单独把这个两个拿出来说呢，他们比较特殊，首先要知道一点，setImmediate 是宏任务， process.nextTick 是微任务（在 node 环境下才有）。

process.nextTick 会在所有的微任务之前执行，setImmediate 会在所有的宏任务最后执行。换句话说， process.nextTick 在所有异步任务前执行，setImmediate 在所有异步任务最后执行。

整个JavaScript 的执行过程：

• 同步任务

• process.nextTick

• 微任务：promise、async await

• 宏任务：setTimeout、setInterval、事件绑定、ajax、读写文件

• setImmediate

setTimeout 与 setInterval

这两个定时器我们经常会用到，setTimeout 用来延迟一定的时间后执行某些事情，setInterval 用来定时执行某些内容。

你有没有想过，定时器的时间是准的吗 ？

我们可以写个 demo 来验证一下：

<script type="text/javascript">for(let index=0; index<10000; index++){
	console.log('hello');}setTimeout(()=>{
	console.log("word");},5);</script>

先循环输出 10000 次 hello，然后 5 毫秒后输出 word。输出 10000 次的 hello 再怎么也需要几十毫秒，那 word 是会插入到 1000 次的 hello 中输出呢还是在最后输出。

结果是最后输出。

可能会有人提出了质疑，上面说过，JavaScript 是单线程的，必须等上面的任务执行完成后才会执行下一个任务，在输出1000次 hello 结束前，根本还没有执行到 setTimeout ，也就是说还没有开始设置定时器，肯定会在最后才输出 word。

改一下代码：

<script type="text/javascript">for(let index=0; index<10000; index++){newPromise((resolve)=>{resolve();}).then(()=>{
		console.log('hello');})}

console.log('你好');setTimeout(()=>{
	console.log('word');},0);// 你好// ....hello// word</script>

输出结果在意料之中，来分析一下：

• for 循环10000次，发现了 10000 个 Promise.then() 异步任务，将其依次放入到任务队列中。

• 同步输出 你好。

• 发现异步任务 setTimeout ，加入到任务队列中 。（重点来了，这里已经开始了定时器）

• 执行 任务队列 中的任务，输出10000次 hello ，然后输出 word。

通过上面的例子可以明确的得到结论：setTimeout 的定时是不准的。

那么 setInterval 呢 ？

当然也是不准的，他们的原理是这样的，在任务队列中，每当遇到 setTimeout 和 setInterval 时，会对当前时间与设置的时间做一个比较，如果未达到设定的阈值，则会将其放入到下一个任务队列中，如果达到了，则执行里面的内容，一直这样无限循环下去。

promise 与 async await

他们都是异步操作，先来说 promise。

promise

第一点：promise 中的内容是同步的，promise.then() 中的内容才是异步的。

<script type="text/javascript">newPromise(()=>{
		console.log(1);}).then(()=>{
		console.log(2);})
	console.log(3);// 1， 3</script>

上面的代码执行后 1 在 3 的前面输出。

第二点：只有调用了 resolve() 方法后才会将 promise.then() 中的内容加到任务队列中。

因此上面的代码并没有输出 2，resolve() 中可以传入一个参数，该参数可以在 .then() 中拿到。

<script type="text/javascript">newPromise((resolve)=>{
		console.log(1);resolve(2);}).then((data)=>{
		console.log(data);})
	console.log(3);// 1， 3， 2</script>

async await

第一点：async 函数返回的是一个 promise 对象

<script type="text/javascript">asyncfunctionfun(){await'hello';}
console.log(fun());// Promise { <pending> }</script>

第二点：await 后面的内容是异步任务，会阻塞后面代码的执行，当 await 的异步任务执行完成后，才会继续向下执行。

<script type="text/javascript">asyncfunctionfun(){
	console.log(1);awaitnewPromise((resolve)=>{
		console.log(2);resolve();}).then(()=>{
		console.log(3);})
	console.log(4);}

console.log(fun());// 1// 2// 3// 4</script>

第三点：async 函数中的 return 后面的内容，并不是函数的返回值。

<script type="text/javascript">asyncfunctionfun(){
  console.log(1);return2;}const fn=fun();
console.log(fn);// 1// Promise { 2 }</script>

第一点已经说到了， async 函数返回的是一个 promise 对象，而 return 后面的内容就相当于 promise.then() 中的内容。

<script type="text/javascript">asyncfunctionfun(){
  console.log(1);return2;}const fn=fun();
fn.then((data)=>{
  console.log(data);})// 1// 2</script>

如果将上面的例子改为同步函数，可以这样写：

<script type="text/javascript">functionfun(){returnnewPromise((resolve)=>{
    console.log(1);resolve(2);}).then((data)=>{
    console.log(data);})}fun();// 1// 2</script>

通过对比可以发现， async 可以将 promise 简化。
常用于异步请求数据，如果异步请求比较多的话，使用 async 可以大大提高代码的可读性，避免了多层嵌套。

<script type="text/javascript">asyncfunctionfun(){const data=awaitnewPromise((resolve)=>{resolve({name:'张三',age:18})}).then((res)=>{return res;});
  console.log(data);}fun();// { name: '张三', age: 18 }</script>

JavaScript 的编译与执行

如果直接输出一个未定义的变量，则会报错：a is not defined。

console.log(a);// Uncaught ReferenceError: a is not defined

console.log(a);var a=1;
console.log(a);// undefined// 1

如果在输出语句的后面定义呢，为什么就不会报错了，而是 undefined，上面不是一直说 JavaScript 是从上至下按照运行栈依次执行吗。

JavaScript 代码在运行时会经历两个阶段：
编译 和 执行，编译阶段往往在执行阶段的前几微秒甚至更短的时间内。

在编译的过程中有一个 变量提升 和 函数提升 的概念，在编译的过程中，先将标识符和函数声明给提升到其对应的作用域的顶端。

因此上面的例子中，第一个输出 a 时，是已经定义了的，但是还并没有执行赋值操作。
第二个输出才会得到结果 1。

函数提升

函数提升也是同样的道理，在编写代码时，我们可以在定义的函数上方使用函数。

fn();functionfn(){
  console.log(1);}// 1

上面的那句话其实并不严谨，有两种生命函数的方式：函数式声明 和 表达式声明。

如果是 表达式声明 的方式，只会提升声明，而不会提升函数表达式，本质上就是 变量提升。

fn();varfn=function(){
  console.log(1);}// fn is not a function