es6 队列_ES6 事件循环机制

执行上下文(Execution Context)

JavaScript中的运行环境大概包括三种情况:

全局环境:JavaScript代码运行起来会首先进入该环境

函数环境:当函数被调用执行时,会进入当前函数中执行代码

eval:存在安全问题(因为它可以执行传给它的任何字符串,所以永远不要传入字符串或者来历不明和不受信任源的参数)不建议使用,可忽略

每次当控制器转到可执行代码的时候,就会进入一个执行上下文。执行上下文可以理解为当前代码的执行环境,它会形成一个作用域。

函数调用栈(call stack)

因此在一个JavaScript程序中,必定会产生多个执行上下文,JavaScript引擎会以函数调用栈的方式来处理它们。栈底永远都是全局上下文,而栈顶就是当前正在执行的上下文。

var color = 'blue';

function changeColor() {

var anotherColor = 'red';

function swapColors() {

var tempColor = anotherColor;

anotherColor = color;

color = tempColor;

}

swapColors();

}

changeColor();

注意:函数中,遇到 return 能直接终止可执行代码的执行,因此会直接将当前上下文弹出栈。

全局上下文的生命周期,与程序的生命周期一致,只要程序运行不结束,比如关掉浏览器窗口,全局上下文就会一直存在。其他所有的上下文环境,都能直接访问全局上下文的属性。

解了这个过程之后,我们就可以对执行上下文做一些总结:

单线程

同步执行,只有栈顶的上下文处于执行中,其他上下文需要等待

全局上下文只有唯一的一个,它在浏览器关闭时出栈

函数的执行上下文的个数没有限制

每次某个函数被调用,就会有个新的执行上下文为其创建,即使是调用的自身函数

执行上下文生命周期

一个执行上下文的生命周期可以分为两个阶段:

创建阶段:在这个阶段中,执行上下文会分别创建变量对象,建立作用域链,以及确定this的指向。

创建变量对象:

建立arguments对象:检查当前上下文中的参数,建立该对象下的属性与属性值。

检查当前上下文的函数声明:在变量对象中以函数名建立一个属性,属性值为指向该函数所在内存地址的引用,如果函数名的属性已经存在,那么该属性将会被新的引用所覆盖。

检查当前上下文中的变量声明:每找到一个变量声明,在变量对象中以变量名建立一个属性,属性值为undefined,如果该变量名的属性已经存在,为了防止同名的函数被修改为undefined,则会直接跳过,原属性值不会被修改。

建立作用域链:作用域链,是由当前环境与上层环境的一系列变量对象组成,它保证了当前执行环境对符合访问权限的变量和函数的有序访问

确定this的指向:this的指向,是在函数被调用的时候确定的,在函数执行过程中,this一旦被确定,就不可更改了。如果调用者函数,被某一个对象所拥有,那么该函数在调用时,内部的this指向该对象。如果函数独立调用,那么该函数内部的this,则指向undefined。

代码执行阶段:创建完成之后,就会开始执行代码,这个时候,会完成变量赋值,函数引用,以及执行其他代码。

创建变量对象:

例子1:

function test() {

console.log(a);

console.log(foo());

var a = 1;

function foo() {

return 2;

}

}

test();

等价于

function test() {

function foo() {

return 2;

}

var a;

console.log(a);

console.log(foo());

a = 1;

}

test();

例子2:

function test() {

console.log(foo);

console.log(bar);

var foo = 'Hello';

console.log(foo);

var bar = function () {

return 'world';

}

function foo() {

return 'hello';

}

}

test();

等价于

function test() {

function foo() {

return 'hello';

}

var bar;

console.log(foo);

console.log(bar);

foo = 'Hello';

console.log(foo);

var bar = function () {

return 'world';

}

}

test();

未进入执行阶段之前,变量对象中的属性都不能访问。但是进入执行阶段之后,变量对象转变为了活动对象,里面的属性都能被访问了,然后开始进行执行阶段的操作。

变量对象和活动对象其实都是同一个对象,只是处于执行上下文的不同生命周期。不过只有处于函数调用栈栈顶的执行上下文中的变量对象,才会变成活动对象。

我们可以用创建变量对象来理解变量提升。

建立作用域链:

作用域链,是由当前环境与上层环境的一系列变量对象组成,它保证了当前执行环境对符合访问权限的变量和函数的有序访问。

var a = 20;

function test() {

var b = a + 10;

function innerTest() {

var c = 10;

return b + c;

}

return innerTest();

}

test();

确定this的指向:

this的指向,是在函数被调用的时候确定的,在函数执行过程中,this一旦被确定,就不可更改了。如果调用者函数,被某一个对象所拥有,那么该函数在调用时,内部的this指向该对象。如果函数独立调用,那么该函数内部的this,则指向undefined。

// demo01

var a = 20;

function fn() {

console.log(this.a);

}

fn();

// demo02

var a = 20;

function fn() {

function foo() {

console.log(this.a);

}

foo();

}

fn();

// demo03

var a = 20;

var obj = {

a: 10,

c: this.a + 20,

fn: function () {

return this.a;

}

}

console.log(obj.c);

console.log(obj.fn());

使用call,apply显示指定this

function fn() {

console.log(this.a);

}

var obj = {

a: 20

}

fn.call(obj);

call与applay后面的参数,都是向将要执行的函数传递参数。其中call以一个一个的形式传递,apply以数组的形式传递。这是他们唯一的不同。

function fn(num1, num2) {

console.log(this.a + num1 + num2);

}

var obj = {

a: 20

}

fn.call(obj, 100, 10);

fn.apply(obj, [20, 10]);

事件循环机制

JS 引擎建立在单线程事件循环的概念上。单线程( Single-threaded )意味着同一时刻只能执行一段代码,与 Swift、 Java 或 C++ 这种允许同时执行多段不同代码的多线程语言形成了反差。

JavaScript代码的执行过程中,除了依靠函数调用栈来搞定函数的执行顺序外,还依靠任务队列(task queue)来搞定另外一些代码的执行。

一个线程中,事件循环是唯一的,但是任务队列可以拥有多个。

任务队列又分为macro-task(宏任务)与micro-task(微任务),在最新标准中,它们被分别称为task与jobs。

macro-task大概包括:script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。

micro-task大概包括: process.nextTick, Promise, Object.observe(已废弃), MutationObserver(html5新特性)

setTimeout/Promise等我们称之为任务源。而进入任务队列的是他们指定的具体执行任务。

来自不同任务源的任务会进入到不同的任务队列。

事件循环的顺序,决定了JavaScript代码的执行顺序。它从script(整体代码)开始第一次循环。之后全局上下文进入函数调用栈。直到调用栈清空(只剩全局),然后执行所有的micro-task。当所有可执行的micro-task执行完毕之后。循环再次从macro-task开始,找到其中一个任务队列执行完毕,然后再执行所有的micro-task,这样一直循环下去。

其中每一个任务的执行,无论是macro-task还是micro-task,都是借助函数调用栈来完成。

例子1:

setTimeout(function() {

console.log('timeout1');

})

new Promise(function(resolve) {

console.log('promise1');

for(var i = 0; i < 1000; i++) {

i == 99 && resolve();

}

console.log('promise2');

}).then(function() {

console.log('then1');

})

console.log('global1');

例子2:

// demo02

console.log('glob1');

setTimeout(function() {

console.log('timeout1');

process.nextTick(function() {

console.log('timeout1_nextTick');

})

new Promise(function(resolve) {

console.log('timeout1_promise');

resolve();

}).then(function() {

console.log('timeout1_then')

})

})

setImmediate(function() {

console.log('immediate1');

process.nextTick(function() {

console.log('immediate1_nextTick');

})

new Promise(function(resolve) {

console.log('immediate1_promise');

resolve();

}).then(function() {

console.log('immediate1_then')

})

})

process.nextTick(function() {

console.log('glob1_nextTick');

})

new Promise(function(resolve) {

console.log('glob1_promise');

resolve();

}).then(function() {

console.log('glob1_then')

})

setTimeout(function() {

console.log('timeout2');

process.nextTick(function() {

console.log('timeout2_nextTick');

})

new Promise(function(resolve) {

console.log('timeout2_promise');

resolve();

}).then(function() {

console.log('timeout2_then')

})

})

process.nextTick(function() {

console.log('glob2_nextTick');

})

new Promise(function(resolve) {

console.log('glob2_promise');

resolve();

}).then(function() {

console.log('glob2_then')

})

setImmediate(function() {

console.log('immediate2');

process.nextTick(function() {

console.log('immediate2_nextTick');

})

new Promise(function(resolve) {

console.log('immediate2_promise');

resolve();

}).then(function() {

console.log('immediate2_then')

})

})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Promise是一种异步编程的解决方案,它可以让我们更方便地处理异步操作。Promise有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。当Promise处于pending状态时,我们可以使用then方法来注册回调函数,当Promise状态变为fulfilled或rejected时,对应的回调函数就会被调用。Promise的原理是基于事件循环机制,它通过微任务和宏任务的方式来实现异步操作。当Promise状态变为fulfilled或rejected时,会将对应的回调函数放入微任务队列中,等待当前任务执行完毕后立即执行;而当我们使用setTimeout等异步API时,会将对应的回调函数放入宏任务队列中,等待事件循环机制执行。这样就可以保证异步操作的顺序性和可靠性。 ### 回答2: ES6中的Promise是一种异步编程的解决方案。它可以解决回调函数嵌套过深、代码可读性差、错误处理困难、无法取消等问题,使异步操作更为简洁、可读和易于维护。Promise对象有三种状态:Pending(等待)、Resolved(已完成)和Rejected(已拒绝)。当Promise状态由Pending变为Resolved或Rejected时,Promise对象会执行相应的操作。 Promise内部有两个重要的执行环节:Promise的实例化和Promise的处理。 在Promise实例化的过程中,需要传入一个函数作为参数。这个函数有两个参数,分别是resolve和reject。resolve参数用于处理Promise成功时的情况,reject参数用于处理Promise失败时的情况。当Promise内部执行完resolve或reject函数后,Promise会立即转换为Resolved或Rejected状态。 在Promise的处理过程中,主要是通过对Promise实例进行链式调用来处理异步操作。由于Promise对象有then方法,所以可以通过链式调用来解决异步操作。 例如: ```js new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 2000); // 2 秒后返回1 }).then(function(result) { console.log(result); // 输出1 return result * 2; }).then(function(result) { console.log(result); // 输出2 return result * 2; }).then(function(result) { console.log(result); // 输出4 return result * 2; }); ``` 以上面的代码为例,Promise对象首先会等待2秒钟,然后返回1。接下来,通过链式调用then方法,依次输出其结果2、4、8。 总体来说,Promise解决了异步操作中回调函数嵌套和错误处理的问题,使得异步操作更为直观和易于维护。同时,Promise也是语言内置的,相比于外部库,更为高效和稳定。 ### 回答3: Promise是ES6中的一项新特性,它有助于解决JS中的异步编程问题。Promise可以看作是一个容器,可以保存某个未来才会结束的事件(通常是一个异步操作)的结果。Promise对象提供了一些接口用于获取异步操作的结果,同时还提供了链式调用的语法,可以将多个异步操作按照一定的顺序进行组合,方便程序员进行复杂的异步编程。 Promise有三个状态:Pending(进行中)、Fulfilled(已成功)和Rejected(已失败)。当一个Promise实例产生结果后,它就会从Pending状态转化为Fulfilled或Rejected状态,不再有其他状态转换。Promise可以通过then方法注册回调函数,分别对应Fulfilled和Rejected状态,回调函数的参数均为Promise的结果。 Promise的作用是在异步操作中解决回调地狱的问题,将异步代码用链式调用的语法进行串联,简化了异步操作的处理。另外,由于Promise是基于链式调用的设计,使得多个异步操作之间可以被串联起来,每个操作的回调函数都通过链式调用的方式进行设置,可以十分直观地描述多个异步操作的关系和完成的顺序。 总结:Promise是ES6中用于解决异步编程问题的新特性,它可以将异步操作进行链式调用,解决回调地狱的问题,同时利用状态转换的特性,可以更加方便地对异步操作的结果进行处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值