JavaScript运转机制的总结（代码示例）-百分百源码网

JavaScript运转机制的总结（代码示例）

发布时间：09/01 来源：未知浏览：关键词：

本篇文章给大家带来的内容是关于JavaScript运转机制的总结（代码示例），有必然的参照价值，有需要的伴侣可以参照一下，但愿对你有所帮忙。

说javascript运转机制此前，先看一段代码：

console.log(1)
Promise.resolve().then(function () {
   console.log(2)
})
new Promise(function(resolve, reject){
    console.log(3)
    resolve()
}).then(function () {
    console.log(4)
    setTimeout(function () {
        console.log(5)
    })
})
console.log(6)
setTimeout(function () {
    Promise.resolve().then(function () {
        console.log(7)
        setTimeout(function () {
            console.log(8)
        })
    })
})

假如你看到这段代码，并知道准确的输出次序。那说明你对这块把握的差不多了。（直接翻到最后看结果）

好，言归正传。

在说是如何运转的此前，先看几个概念。

施行上下文（Execution Context）

施行上下文简便来说就是一个施行环境。它有全局环境、函数环境和eval函数环境之分。它会在javascript引擎施行你的足本的时候去创立。

施行栈（Execution Stack）

施行栈也就是常说的调取栈，它是一种具有LIFO（后进先出）的数据构造。它会储备代码运转时创立的施行上下文

微任务（micro task）与宏任务（macro task）

javasript中的任务分为微任务和宏任务两种，这两种任务的施行时机是不一样的，因此区分js中哪些是宏任务，哪些是微任务则十分重要。我们常见的宏任务有：script任务、setTimeout、ajax等，常见的微任务比力典型的是：Promise.resolve().then()、process.nextTick、MutationObserver等。

事件轮回（event loop）

js是单线程的，也就是说它一次仅能处置一个任务。但js所在的宿主环境，也就是我们所说的阅读器并不是单线程的（这里宿主环境仅计议阅读器）。它在碰到一些任务时，比方说setTimeout、event listener等。它会告诉阅读器：老兄帮个忙，事成后通知我一声，小弟我先干别的事去了。阅读器会回应说：交给我吧，小老弟，事成后我放到任务队列，本人去取啊。于是，js开端施行script任务，施行完了就开端检查有没有微任务啊，没有的话就从任务队列开端取宏任务施行，每施行完一次宏任务，就去看看有没有微任务，有的话就施行完成，再施行宏任务，如此往复。如下：

理解了这几个概念，再来看看javascript是如何施行代码的就比力轻松兴奋了。开端吧

console.log(1)

Promise.resolve().then(function () {
   console.log(2)
})

new Promise(function(resolve, reject){
    console.log(3)
    resolve()
}).then(function () {
    console.log(4)
    setTimeout(function () {
        console.log(5)
    })
})

console.log(6)

setTimeout(function () {
    Promise.resolve().then(function () {
        console.log(7)
        setTimeout(function () {
            console.log(8)
        })
    })
})

js引擎在施行这段代码的时候，第一将全局施行上下文压入栈中：

然后呢，在施行的时候会碰到console.log函数，将它压入栈中：

这个时候，直接施行console函数，并输出1。然后console函数出栈：

连续往下施行，碰到了Promise.resolve().then(),先将Promise.resolve().then()压入栈中（这里，我为了图利便就把它看成团体了，不然得画许多图）。

然后施行Promise.resolve().then(),前面说过，这个then()函数是个微任务，它会将传入给它的回调函数参加到微任务队列中。

然后Promise.resolve().then()就出栈了。

接着施行，碰到promise的结构函数，这个结构函数是一个宏任务，会直接将传递给它的函数压入栈中。

施行console函数并输出3，施行完，console函数出栈，接着施行resolve()函数，并出栈。
然后连续施行then函数，将传递给then函数的参数函数放到微任务队列中：

连续来，连续往下施行。碰到console.log(6),二话不说，直接压入栈中，施行，输出6，出栈，趁热打铁。

接着，引擎碰到了setTimeout函数，这家伙是个宏任务，但同时它会将传递给它的函数，参加到任务队列中：

好了，到此第一波宏任务就全部施行完毕。接着，引擎就会去看一下微任务队列中有没有任务，假如有的话，施行它们。

此刻看到的是，微任务队列中有两个任务。依照队列的先入先出规则，先从function () {console.log(2)}开端施行。先是函数入栈，然后施行函数，输出2，然后函数出栈。

接着施行下面这段代码：

console.log(4)
setTimeout(function () {
   console.log(5)
})

先从console.log(4)开端，先将它入栈，然后施行它，输出4，然后函数出栈。

接着施行：

setTimeout(function () {
   console.log(5)
})

将

function () {
    console.log(5)
}

参加到任务队列中去

先施行：

function(){
Promise.resolve().then(function () {
        console.log(7)
        setTimeout(function () {
            console.log(8)
        })
    })
}

这里施行这个函数的时候碰到一个微任务，将这个微任务增加到微任务队列，如下：