JS执行上下文的两个阶段做了些啥？

咱们开始之前，有个问题大家可以一起讨论: JS是解释语言还是编译语言？

(JS)是一种解释语言，有自己的编译器形式，运行在JS引擎中。

每个web浏览器都有自己的JS引擎形式，尽管目的一样。Chrome 有 v8, Mozilla 有 spider monkey等，JS引擎只是将JS源代码转换成编译器能够理解的语言，然后执行它。

执行上下文

JS 代码运行的环境构成了执行上下文，执行上下文决定哪段代码可以访问变量、函数、对象等。

1.全局执行上下文

任何时候码第一次运行，或者当代码不在任何函数中时，它都会进入全局执行上下文。在整个代码执行过程中只有一个全局执行上下文。

对于浏览器全局执行上下文，它做两件事：

创建window对象。
将 this 指向了 windw 对象 (非严格模式)

2. 函数执行上下文

当函数执行时，它就创建一个新的函数执行上下文，可以有任意数量的函数执行上下文。

执行堆栈/调用堆栈

浏览器中JS解器是单线程，同一时间只能干一件事。代码中有一个全局的执行上下文和无数个函数执行上下文，那么他们是按什么顺序执行的呢？

这里就需要一个 执行上下文栈 的概念了，JS引擎是通过创建执行上下文栈来管理执行上下文的。这里可以把执行上下文栈描述为一个存着函数调用的栈结构，执行顺序遵循先进后出的原则,也就是说一个函数的执行上下文，在函数执行完毕之后，会被移除执行上下文栈。

每当脚本在浏览器中加载时，堆栈中的第一个元素就是全局执行上下文。然而，当一个函数执行时，将创建一个执行上下文，并将其虚拟的放置在全局执行上下文之上。函数一旦执行完毕，就会从执行堆栈中弹出并将控制权交给到它下面的上下文中。

咱们举个例子，来模拟上述的过程：

步骤1:当上述代码加载到浏览器中时，JS引擎创建一个全局执行上下文(global execution context )并将其推入当前执行堆栈。

步骤2:假设最后执行func1()调用，然后JS引擎为该函数创建一个新的执行上下文(function execution context)，并将其推到全局执行上下文的顶部。

步骤3:在func1()中，咱们调用了func2()，因此JS引擎为该函数创建一个新的执行上下文，并将其推到func1()执行上下文的顶部。

步骤4:当func2()函数结束时，它的执行上下文从当前堆栈中弹出，控制权交给它下面的执行上下文，即func1()函数的执行上下文。

步骤5:当func1()函数结束时，它的执行堆栈将从堆栈中删除，控制权交给全局执行上下文。执行完所有代码后，JS 引擎将从当前堆栈中删除全局执行上下文。

执行上下文阶段

执行上下文主要有两个阶段。

创建
执行

创建阶段

函数创建时做的三件事：

1.首先，为用域链内的每个函数或变量构建到外部环境的连接。告诉执行上下文它应该包含什么，以及它应该在哪里查找解析函数引用和变量值的方法。

对于全局环境，外部环境为null。然而，全局环境内的所有环境都是以全局环境作为其外部环境的。
例如:如果函数a包含在函数b中，这意味着a有一个外部环境b。

2.接着，通过扫描作用链，创建一个环境记录，其中全局上下文的创建和引用(web浏览器中的window)、变量、函数和函数参数都在内存中完成。

3.最后，在第一步中创建的每个执行上下文中确定this的值(对于全局执行上下文，this指向的是window)。

因此，咱们可以将创建阶段表示为

创建阶段 = {
  scopeChain: {
        /* 作用域链解析 */ 
    },    
  variableObject: {
        /* arguments, 函数参数, 内部变量 等等*/ 
    },
  this: {},
}

variableObject: 初始化函数的参数variableObject,提升函数声明和变量声明。

scopeChain: 在执行上下文的创建阶段，作用域会在变量对象创建之后创建。作用域链本身包括变量对象。作用域负责解析变量，当被要求解析变量的时候，会从代码嵌套结构的最内层开始，如果在最内层没有找到对应变量，则依次向父级作用域中进行查找，直到寻找到最外层作用域。

this: 确定this的指向，这里需要注意的事this的值是在执行的时候确定的，在定义的时候并不会确定。

执行阶段

这是代码开始在创建阶段形成的执行上下文中运行的阶段，并逐行分配变量值。

在执行开始时，JS 引擎在其创建阶段对象中寻找执行函数的引用。如果不能在自己的作用域内找到它，它将继续向上查找，直到到达全局环境。

如果在全局环境中没有找到引用，它将返回一个错误。但是，如果找到了一个引用，并且函数执行正确，那么这个特定函数的执行上下文将从堆栈中弹出，JS 引擎将移动到下一个函数，在那里，它们的执行上下文将被添加到堆栈中并执行，依此类推。

咱们通过示例查看上面的两个阶段，以便更好地理解它。

1111

在创建阶段，全局执行上下文类似于这样

globalExecutionObj = {
    outerEnvironmentConnection: null,
    variableObjectMapping: {
        name: uninitialized,
        title: undefined,
        date: uninitialized,
        func1: func,
    },
    this: window //Global Object
}

**注意:**上面，let (name)和const (date)定义的变量在创建阶段没有任何关联的值，但是var (title)定义的变量会被设置为undefined。

这就是为什么咱们可以在声明var定义的变量之前访问它们**(虽然没有定义)**，但是在声明let和 const变量之前访问它们时，会得到一个引用错误。

这就是咱们所说的变量提升，即所有使用var的变量声明都被提升它们的局部作用域(在函数内部声明)或者全局作用域的顶部(在函数外部声明的)。

在执行阶段，完成变量分配。所以全局执行上下文在执行阶段类似如下：

globalExectutionObj = {
    outerEnvironmentConnection: null,
    variableObjectMapping: {
        name: "overflowjs.com",
        title: "Execution context",
        date: "5 july 2019",
        func1: pointer to function func1,
    },
    this: window //Global Object
}

**注意:**在执行阶段，如果JS引擎在源代码中声明位置找不到let变量的值，那么它将为其赋值undefined。

现在，当func1执行，就会生成一个新的函数执行上下文，其创建阶段类似如下：

func1ExecutionObj = {
    outerEnvironmentConnection: Global,
    variableObjectMapping: {
       arguments: {
            0: 10,
            length: 1
        },
        num: 10,

        author: undefined,
        val: uninitialized,
        func2: undefined
        fixed: uninitialized
        addFive: pointer to function addFive()
    },
    this: Global Object or undefined
}

在执行阶段类似如下：

func1ExecutionObj = {
    outerEnvironmentConnection: Global,
    variableObjectMapping: {
       arguments: {
            0: 10,
            length: 1
        },
        num: 10,

        author: "Deepak",
        val: 3,
        func2: pointer to function func2() 
        fixed: "Divine"
        addFive: pointer to function addFive()
    },
    this: Global Object or undefined
}

函数执行完成后，将更新全局环境。然后全局代码完成，程序结束。

作用域与作用域链

1.作用域

JavaScript中的作用域分为三种：

全局作用域
函数作用域
块级作用域（ES6）

作用域最大的作用就是隔离变量或函数，并控制他们的生命周期。作用域是在函数执行上下文创建的时候定义好的，不是在函数执行的时候定义的。

2.什么是作用域链

当一个块或者函数嵌套在另一个块或函数中时，就发生了作用域的嵌套。在当前函数中如果JS引擎无法找到某个变量，就会往上级嵌套的作用域中去寻找，直到找到该变量或抵达全局作用域，这样的链式关系成为作用域链（Scope Chain）。

来个例子演示一下：

var scope = 'global';

function checkscope(s) {
    var scope = 'local scope';
    
    function f() {
        return scope;
    }
    
    return f();
}

checkScope('scope');

首先在checkscope函数声明的时候，内部会绑定一个[[scope]]的内部属性：

checkscope.[[scope]] = [
  globalContext.VO
];

接着在checkScope函数在执行之前，创建执行上下文checkscopeContext,并推入执行上下文栈：

赋值函数的[[scope]]属性初始化作用链
创建变量对象
将变量对象压入作用域链的顶端

// -> 初始化作用域链；
checkscopeContext = {
  scope: [globalContext.VO],
}

// -> 创建变量对象
checkscopeContext = {
  scope: [globalContext.VO],
  VO = {
    arguments: {
      0: 'scope',
      length: 1,
    },
    s: 'scope', // 传入的参数
    f: function f(),
    scope: undefined, // 此时声明的变量为undefined
  },
}

// -> 将变量对象压入作用域链的最顶端
checkscopeContext = {
  scope: [VO, globalContext.VO],
  VO = {
    arguments: {
      0: 'scope',
      length: 1,
    },
    s: 'scope', // 传入的参数
    f: function f(),
    scope: undefined, // 此时声明的变量为undefined
  },
}

执行阶段，修改变量对象里面对应字段的值:

checkscopeContext = {
  scope: [VO, globalContext.VO],
  VO = {
    arguments: {
      0: 'scope',
      length: 1,
    },
    s: 'scope', // 传入的参数
    f: pointer to function f(),
    scope: 'local scope', // 变量赋值
  }
}

在代码执行阶段，会看到f函数的声明代码，给f函数绑定[[scope]]属性：

f.[[scope]] = [
  checkscopeContext.VO, // f函数的作用域还包括checkscope的变量对象
  globalContext.VO
];

文本到这就结束了，希望对大伙有所帮助。

作者：DEEPAK GUPTA 译者：前端小智来源：overflowjs.com

原文：https://overflowjs.com/posts/Javascript-Execution-Context-and-Hoisting.html

篇文章的目的是为了让你彻底理解 JavaScript 的执行，如果你到本文最后还没有理解，你可以揍我一顿。

无论你是 JavaScript 新手还是老手，无论你是在面试工作，还是只是做常规的开发工作，通常会发现给定几行代码，你需要知道要输出什么以及以什么顺序输出 . 由于 JavaScript 是一种单线程语言，我们可以得出以下结论：

let a = '1';
console.log(a);
let b = '2';
console.log(b);

然而，JavaScript 实际上是这样的：

setTimeout(function(){
    console.log('start')
});
new Promise(function(resolve){
    console.log('start for');
    for(var i = 0; i < 10000; i++){
        i == 99 && resolve();
    }
}).then(function(){
    console.log('start then')
});
console.log('end');
// Following the idea that JS executes in the order in which the statements appear, I confidently write down the output:
// start
// start for
// start then
// end

在 Chrome 上查看它是完全错误的

一、关于 JavaScript

JavaScript 是一种单线程语言。Web-worker 是在最新的 HTML5 中提出的，但 JavaScript 是单线程的核心保持不变。所以所有 JavaScript 版本的“多线程”都是用单线程模拟的，所有的 JavaScript 多线程都是纸老虎！

二、JavaScript 事件循环

由于 JavaScript 是单线程的，它就像一个只有一个窗口的银行。客户需要一一排队办理业务。

同样，JavaScript 任务也需要一个一个地执行。如果一项任务花费的时间太长，则下一项也必须等待。

那么问题来了，如果我们想浏览新闻，但新闻中包含加载缓慢的超高清图像，我们的网页是否应该一直卡住直到图像完全显示？所以聪明的程序员将任务分为两类：

同步任务
异步任务

当我们打开一个网站时，页面的渲染过程是很多同步任务，比如渲染页面骨架和页面元素。

需要大量时间的任务，比如加载图片和音乐，都是异步任务。这部分有严格的文字定义，但本文的目的是以最小的学习成本彻底理解实现机制，所以我们用一张图来说明：

文字要表达的内容：

同步和异步任务去不同的执行“地方”，同步任务去主线程，异步任务去事件表和注册函数。

当指定的事件完成时，事件表将此函数移至事件队列。

如果执行后主线程中的任务为空，事件队列会读取相应的函数，进入主线程执行。

这个过程一遍又一遍地重复，称为事件循环。

我们怎么知道主线程栈是空的？JavaScript 引擎有一个监控进程，不断检查主线程堆栈是否为空，如果是，则检查 Event Queue 以查看是否有任何函数等待调用。

说了这么多，不如直接写一段代码：

let data = [];
$.ajax({
    url:www.javascript.com,
    data:data,
    success:() => {
        console.log('success!');
    }
})
console.log('end');

这是一个简单的ajax请求代码：

ajax 去事件表并注册回调函数成功。
执行 console.log(‘success’)。
ajax Event 完成，回调函数success 进入Event Queue。
主线程从事件队列中读取成功并执行。

相信通过上面的文字和代码，你对JS的执行顺序有了初步的了解。接下来，我们来看看进阶话题：setTimeout。

三、爱恨交加超时

著名的 setTimeout 无需进一步解释。setTimeout 的第一印象是异步执行可以延迟，我们经常这样实现：

setTimeout(() => {
 console.log(‘Delay 3 seconds’);
},3000)

当 setTimeout 用得越来越多时，问题也出现了。有时函数会在 3 秒的书面延迟后 5 或 6 秒内执行。怎么了？

让我们从一个例子开始：

setTimeout(() => {
    task();
},3000)
console.log('console');

按照我们之前的结论，setTimeout是异步的，应该先执行console.log。

//console
//task()

去看看吧！这是正确的！然后我们修改之前的代码：

复制setTimeout(() => {
    task()
},3000)
sleep(10000000)

控制台上的 task() 在 Chrome 中执行需要超过 3 秒的时间。

此时，我们需要重新思考setTimeout的定义。

先说上面的代码是如何执行的：

task() 进入事件表并注册，定时器启动。
执行sleep，非常慢，非常慢，计时继续。
task()进入Event Queue，但是，sleep太慢无法执行。
sleep终于结束了，task()终于从Event Queue执行到主线程。

上述过程完成后，我们知道setTimeout是一个在指定时间后将任务添加到Event Queue（本例中为task()）的函数。

而且，由于是单线程任务，需要一个一个执行，如果上一个任务耗时过长，我们只能等待。导致实际延迟超过 3 秒。

SetTimeout(fn,0) 是我们经常遇到的另一个代码。可以立即完成吗？

SetTimeout (fn,0) 指定任务将在主线程上最早可用的空闲时间执行。这意味着一旦堆栈中的所有同步任务完成并且堆栈为空，主线程将立即执行。例如：

//code1
console.log('one');
setTimeout(() => {
    console.log('two')
},0);
// result
// one  
// two
//code2
console.log('one');
setTimeout(() => {
    console.log('two')
},3000);
// result
// one
// ... 3s later
// two

关于 setTimeout 要补充的一点是，即使主线程是空的，0 毫秒实际上也是无法到达的。根据 HTML 标准，最小值为 4 毫秒。有兴趣的同学可以自行了解。

四、恨与爱setInterval

说了 setTimeout，你不能错过它的孪生兄弟 setInterval。它们是相似的，只是后者是循环执行。对于执行顺序，setInterval 将按指定的时间间隔将注册的函数放入事件队列中。如果上一个任务耗时过长，也需要等待。

唯一需要注意的是，对于 setInterval(fn,ms)，我们已经知道不是每 ms 秒执行一次 fn，而是每 ms 秒进入 Event Queue。一旦 setInterval 的回调 fn 花费的时间超过了延迟 ms，时间间隔就完全不可见了。请读者细细品味这句话。

五、Promise 和 process.nextTick(callback)

我们已经看过传统的计时器，然后，我们将探讨 Promise 与 process.Nexttick（回调）的性能。

Promise 的定义和功能这里就不介绍了，process.nexttick（回调）类似于node.js 版本的“setTimeout”，在事件循环的下一次迭代中调用回调函数。

我们开始谈正事吧。除了广义的同步和异步任务，我们对任务有更详细的定义：

宏任务：包括整个代码脚本、setTimeout 和 setInterval
微任务：Promise、process.nexttick

不同类型的任务会进入对应的Event Queue。例如，setTimeout 和 setInterval 将进入同一个事件队列。

事件循环的顺序决定了 JS 代码的执行顺序。输入整体代码（宏任务）后，第一个循环开始。然后，执行所有微任务。然后再从宏任务开始，找一个任务队列完成，然后，执行所有的微任务。如果听起来有点绕，我们用本文开头的代码来说明：

setTimeout(function() {
    console.log('setTimeout');
})
new Promise(function(resolve) {
    console.log('promise');
}).then(function() {
    console.log('then');
})
console.log('console');

此代码作为宏任务进入主线程。
当遇到 setTimeout 时，将其回调函数注册并分发到宏任务 Event Queue。（注册过程同上，下面不再赘述）。
然后，遇到一个 Promise，立即执行 New Promise，然后将 then 函数分派到微任务事件队列中。如果遇到console.log()，立即执行。
好的，整个脚本作为第一个宏任务执行。什么是微任务？我们发现 then 是在 microtask Event Queue 中执行的。
好了，第一轮的 Event loop 已经结束了，让我们开始第二轮，当然是从宏任务 Event Queue 开始。我们在宏任务Event Queue中找到setTimeout对应的回调函数，立即执行。
结束。

事件循环、宏任务和微任务的关系如下图所示：

让我们看一些更复杂的代码，看看你是否真的了解 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')
    })
})

第一轮事件循环流程分析如下：

整个脚本作为第一个宏任务进入主线程，遇到console.log，打印1。

当遇到 setTimeout 时，它的回调函数被调度到宏任务事件队列。我们称之为 setTimeout1。
当遇到 process.nexttick() 时，将其回调函数调度到微任务事件队列中。我们称它为 process1。
如果遇到 Promise，直接执行新的 Promise，打印 7，然后，分发到微任务 Event Queue，让我们称之为then1。
再次遇到setTimeout，它的回调函数被分发到宏任务Event Queue中，我们称之为setTimeout2。

上表展示了第一轮Event loop的宏任务结束时各个Event Queue的情况。这时候已经输出了1和7。
我们找到了两个微任务 process1 和 then1。
执行process1，输出6。
执行 then1 print 8。

好了，第一轮事件循环正式结束，本轮结果输出1,7,6,8。所以第二个时间循环从 setTimeout1 宏任务开始：

首先，print2。接下来是process.nexttick()，它也被分派到微任务事件队列中，称为process2。新的 Promise 立即执行输出 4，然后也被分发到微任务事件队列中，记为 then2。

第二轮事件循环宏任务完成，我们发现 process2 和 then2 微任务可以执行。
3的输出。
5的输出。
第二个事件循环结束，第二轮输出2,4,3,5。
第三个事件循环开始，此时只剩下setTimeout2，执行。
所以它只print 9。
将 process.nexttick() 分发到微任务事件队列。记得process 3。
只需执行 new Promise，print 11。
then 分配 microtask Event Queue，记为 then3。

第三轮事件循环宏任务执行完成，执行两个微任务process3和then3。
10 的输出。
12的输出。
第三轮事件循环结束。第三轮输出9,11,10,12。

整个代码，一共经过了3次事件循环，完整的输出为1,7,6,8,2,4,3,5,9,11,10,12。

六、写在最后

1、异步 JavaScript

我们从一开始就说过 JavaScript 是单线程语言，无论什么新的框架和语法实现被称为异步，实际上都是以同步的方式模拟的，所以牢牢掌握单线程很重要。

2、事件循环

事件循环是实现异步 JavaScript 的一种方法，也是 JavaScript 的执行机制。

3、JavaScript的执行和运行

在 Node.js、浏览器、Ringo 等不同的环境中执行和运行 JavaScript 是有很大区别的。虽然运行多指 JavaScript 解析引擎，但它是统一的。

4、立即设置

还有许多其他类型的微任务和宏任务，例如 setImmediate，它们不进行中介。

5、在一天结束时

JavaScript 是一种单线程语言。事件循环是 JavaScript 的执行机制。

牢牢把握两个基本点，以认真学习JavaScript为中心，早日实现成为前端高手的伟大梦想！

来源： WEB前端开发社区

言

在JavaScript的世界里，事件循环（Event Loop）是一个核心概念，它决定了JavaScript代码的执行顺序，尤其是异步代码。理解事件循环对于编写高效、响应迅速的JavaScript程序至关重要。本文将深入探讨事件循环的原理，并通过实际代码示例展示其在JavaScript编程中的应用。

1. 理解事件循环

1.1 JavaScript的执行模型

JavaScript有一个基于单线程的事件循环执行模型。这意味着JavaScript代码在一个单独的线程上执行，一次只能执行一个任务。为了处理高延迟操作（如I/O），JavaScript采用了异步编程模型。

1.2 任务队列

JavaScript中的任务分为两种：宏观任务（macrotasks）和微观任务（microtasks）。宏观任务包括例如setTimeout、setInterval、I/O操作等。微观任务则包括例如Promise的回调、MutationObserver等。

1.3 事件循环的工作流程

事件循环的工作流程大致如下：

JavaScript引擎首先执行全局脚本（main script）。
当执行到异步代码时（如setTimeout），这些异步操作会被添加到相应的任务队列中。
一旦全局脚本执行完毕，事件循环开始工作，首先处理所有完成的微观任务。
处理完所有微观任务后，事件循环选择一个宏观任务队列中的任务，并执行它。
重复步骤3和4。

2. 事件循环的实际应用

2.1 setTimeout和setInterval

示例代码：

console.log('开始');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

console.log('结束');

输出顺序：开始 -> 结束 -> setTimeout

2.2 Promise和async/await

示例代码：

console.log('开始');

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('结束');

输出顺序：开始 -> 结束 -> Promise

2.3 宏观任务和微观任务的交互

示例代码：

console.log('开始');

setTimeout(() => {
  console.log('setTimeout 1');
  Promise.resolve().then(() => {
    console.log('Promise 1');
  });
}, 0);

setTimeout(() => {
  console.log('setTimeout 2');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise 2');
});

console.log('结束');

输出顺序：开始 -> 结束 -> Promise 2 -> setTimeout 1 -> Promise 1 -> setTimeout 2

3. 事件循环的性能考量

虽然事件循环使得JavaScript能够高效地处理异步操作，但在编写代码时，应避免过多地使用微观任务，特别是在性能敏感的应用中。此外，理解事件循环对于调试异步代码也非常重要。

总结

事件循环是JavaScript中一个核心的概念，它决定了异步代码的执行顺序。通过理解事件循环，我们可以更有效地编写和管理异步操作，从而创建响应迅速且高效的JavaScript程序。在实际应用中，无论是使用setTimeout、Promise，还是async/await，事件循环都扮演着至关重要的角色。然而，在享受事件循环带来的便利的同时，也需要注意性能和代码结构的问题，确保程序的高效运行和可维护性。

在线咨询

上一篇：el-table纵向表格添加列
下一篇：轻松工资条 Excel工资表秒变工资条智能导入一键群发

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JS执行上下文的两个阶段做了些啥？

执行上下文

1.全局执行上下文

2. 函数执行上下文

执行堆栈/调用堆栈

执行上下文阶段

创建阶段

执行阶段

作用域与作用域链

1.作用域

2.什么是作用域链

一、关于 JavaScript

二、JavaScript 事件循环

三、爱恨交加超时

四、恨与爱setInterval

五、Promise 和 process.nextTick(callback)

六、写在最后

1、异步 JavaScript

2、事件循环

3、JavaScript的执行和运行

4、立即设置

5、在一天结束时

您的项目需求