JS基础总结（5）—— JS执行机制与EventLoop

时间 2020-02-26

原文原文链接

前言

农历2019已通过去，趁着上班前这段时间，整理了一下javascript的基础知识，在此给你们作下分享，喜欢的大佬们能够给个小赞。本人github: github.com/Michael-lzgjavascript

JS 执行上下文

当代码运行时，会产生一个对应的执行环境，在这个环境中，全部变量会被事先提出来（变量提高），有的直接赋值，有的为默认值 undefined，代码从上往下开始执行，就叫作执行上下文。java

例子 1: 变量提高node

foo // undefined
var foo = function() {
  console.log('foo1')
}

foo() // foo1，foo赋值

var foo = function() {
  console.log('foo2')
}

foo() // foo2，foo从新赋值
复制代码

例子 2：函数提高jquery

foo() // foo2
function foo() {
  console.log('foo1')
}

foo() // foo2

function foo() {
  console.log('foo2')
}

foo() // foo2
复制代码

例子 3：声明优先级，函数 > 变量webpack

foo() // foo2
var foo = function() {
  console.log('foo1')
}

foo() // foo1，foo从新赋值

function foo() {
  console.log('foo2')
}

foo() // foo1
复制代码

运行环境

在 JavaScript 的世界里，运行环境有三种，分别是：git

全局环境：代码首先进入的环境
函数环境：函数被调用时执行的环境
eval 函数：（不经常使用）

执行上下文特色

单线程，在主进程上运行
同步执行，从上往下按顺序执行
全局上下文只有一个，浏览器关闭时会被弹出栈
函数的执行上下文没有数目限制
函数每被调用一次，都会产生一个新的执行上下文环境

执行上下文栈

执行全局代码时，会产生一个执行上下文环境，每次调用函数都又会产生执行上下文环境。当函数调用完成时，这个上下文环境以及其中的数据都会被消除，再从新回到全局上下文环境。处于活动状态的执行上下文环境只有一个。github

其实这是一个压栈出栈的过程——执行上下文栈。web

var // 1.进入全局上下文环境
  a = 10,
  fn,
  bar = function(x) {
    var b = 20
    fn(x + b) // 3.进入fn上下文环境
  }

fn = function(y) {
  var c = 20
  console.log(y + c)
}

bar(5) // 2.进入bar上下文环境
复制代码

执行上下文生命周期

一、建立阶段

生成变量对象
创建做用域链
肯定 this 指向

二、执行阶段

变量赋值
函数引用
执行其余代码

三、销毁阶段

执行完毕出栈，等待回收被销毁

javascript 事件循环

同步和异步任务分别进入不一样的执行"场所"，同步的进入主线程，异步的进入 Event Table 并注册函数。
当指定的事情完成时，Event Table 会将这个函数移入 Event Queue。
主线程内的任务执行完毕为空，会去 Event Queue 读取对应的函数，进入主线程执行。
上述过程会不断重复，也就是常说的 Event Loop(事件循环)。

同步任务和异步任务，咱们对任务有更精细的定义：

macro-task(宏任务)：

能够理解是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)。

浏览器为了可以使得 JS 内部(macro)task与 DOM 任务可以有序执行，会在一个(macro)task执行结束后，在下一个(macro)task执行开始前，对页面进行从新渲染。

(macro)task 主要包含：script(总体代码)、setTimeout、setInterval、I/O、UI 交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)

micro-task(微任务)：

能够理解是在当前 task 执行结束后当即执行的任务。也就是说，在当前 task 任务后，下一个 task 以前，在渲染以前。因此它的响应速度相比 setTimeout（setTimeout 是 task）会更快，由于无需等渲染。也就是说，在某一个 macrotask 执行完后，就会将在它执行期间产生的全部 microtask 都执行完毕（在渲染前）。

microtask 主要包含：Promise.then、MutaionObserver、process.nextTick(Node.js 环境)

举个例子

咱们来分析一段较复杂的代码，看看你是否真的掌握了 js 的执行机制：

console.log('1')

setTimeout(function() {
  console.log('2')
  process.nextTick(function() {
    console.log('3')
  })
  new Promise(function(resolve) {
    console.log('4')
    resolve()
  }).then(function() {
    console.log('5')
  })
})
process.nextTick(function() {
  console.log('6')
})
new Promise(function(resolve) {
  console.log('7')
  resolve()
}).then(function() {
  console.log('8')
})

setTimeout(function() {
  console.log('9')
  process.nextTick(function() {
    console.log('10')
  })
  new Promise(function(resolve) {
    console.log('11')
    resolve()
  }).then(function() {
    console.log('12')
  })
})

// 1,7,8,2,4,5,6,3,9,11,12,10
复制代码

再来一段

async function async1() {
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}
async function async2() {
  console.log('async2')
}
console.log('script start')
setTimeout(function() {
  console.log('setTimeout')
}, 0)
async1()
new Promise(function(resolve) {
  console.log('promise1')
  resolve()
}).then(function() {
  console.log('promise2')
})
console.log('script end')

// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// setTimeout
复制代码

解决异步问题的方法

回调函数

ajax('XXX1', () => {
  // callback 函数体
  ajax('XXX2', () => {
    // callback 函数体
    ajax('XXX3', () => {
      // callback 函数体
    })
  })
})
复制代码

优势：解决了同步的问题
缺点：回调地狱，不能用 try catch 捕获错误，不能 return

二、Promise 为了解决 callback 的问题而产生。

Promise 实现了链式调用，也就是说每次 then 后返回的都是一个全新 Promise，若是咱们在 then 中 return ，return 的结果会被 Promise.resolve() 包装。

优势：解决了回调地狱的问题
缺点：没法取消 Promise ，错误须要经过回调函数来捕获

三、Async/await

优势是：代码清晰，不用像 Promise 写一大堆 then 链，处理了回调地狱的问题
缺点：await 将异步代码改形成同步代码，若是多个异步操做没有依赖性而使用 await 会致使性能上的下降。

总结

javascript 是一门单线程语言
Event Loop 是 javascript 的执行机制

node 环境和浏览器的区别

一、全局环境下 this 的指向

node 中 this 指向 global
浏览器中 this 指向 window
这就是为何 underscore 中一上来就定义了一 root；

浏览器中的 window 下封装了很多的 API 好比 alert 、document、location、history 等等还有不少, 我门就不能在 node 环境中 xxx();或 window.xxx();了。由于这些 API 是浏览器级别的封装，存 javascript 中是没有的。固然 node 中也提供了很多 node 特有的 API。

二、js 引擎

在浏览器中不一样的浏览器厂商提供了不一样的浏览器内核，浏览器依赖这些内核解释折咱们编写的 js。可是考虑到不一样内核的少许差别，咱们须要对应兼容性好在有一些优秀的库帮助咱们处理这个问题。好比 jquery、underscore 等等。
nodejs 是基于 Chrome's JavaScript runtime，也就是说，实际上它是对 GoogleV8 引擎（应用于 Google Chrome 浏览器)进行了封装。V8 引擎执行 Javascript 的速度很是快，性能很是好。

三、DOM 操做

浏览器中的 js 大多数状况下是在直接或间接（一些虚拟 DOM 的库和框架）的操做 DOM。由于浏览器中的代码主要是在表现层工做。
node 是一门服务端技术。没有一个前台页面，因此咱们不会再 node 中操做 DOM。

四、I/O 读写

与浏览器不一样，咱们须要像其余服务端技术同样读写文件，nodejs 提供了比较方便的组件。而浏览器（确保兼容性的）想在页面中直接打开一个本地的图片就麻烦了好多（别和我说这还不简单，相对路径。。。。。。试试就知道了要么找个库要么二进制流，要么上传上去有了网络地址在显示。否则人家为何要搞一个 js 库呢），而这一切 node 都用一个组件搞定了。

五、模块加载

javascript 有个特色，就是原生没提供包引用的 API 一次性把要加载的东西全执行一遍，这里就要看各位闭包的功力了。所用东西都在一块儿，没有分而治之，搞的特别没有逻辑性和复用性。若是页面简单或网站固然咱们能够经过一些 AMD、CMD 的 js 库（好比 requireJS 和 seaJS）搞定事实上不少大型网站都是这么干的。
nodeJS 中提供了 CMD 的模块加载的 API，若是你用过 seaJS，那么应该上手很快。node 还提供了 npm 这种包管理工具，能更有效方便的管理咱们饮用的库