js常见代码输出问题之promise,await,变量提升以及闭包（包括例子以及详细解析）

异步事件循环

宏任务微任务

1. 执行顺序

先执行微任务再执行宏任务，注意宏任务微任务的多轮次,每执行完一次宏任务后都要检查有没有可执行的微任务

2. 分类

宏任务：setTimeout、setInterval、I/O 操作（如文件读取、网络请求等）、UI 渲染
微任务：Promise 的 then、catch、finally、process.nextTickMutationObserver

Promise代码输出

promise.then是微任务，执行要等所有宏任务执行完并且promise内部状态发生变化，状态改变后不会再更改

1. promise.then执行时机

<script>
const promise = new Promise((resolve, reject) => {console.log(1);setTimeout(() => {console.log("timerStart");resolve("success");console.log("timerEnd");}, 0);console.log(2);
});
//由于Promise的状态此时还是pending，所以promise.then先不执行
promise.then((res) => {console.log(res);
});
console.log(4);
//最终输出1 2 4 timerStart timerEnd success
</script>

2. 宏任务微任务的多轮次

<script>
Promise.resolve().then(() => {console.log('promise1');//进入第二轮宏任务const timer2 = setTimeout(() => {console.log('timer2')}, 0)
});
const timer1 = setTimeout(() => {console.log('timer1')//进入第二轮微任务，先执行Promise.resolve().then(() => {console.log('promise2')})
}, 0)
console.log('start');
//输出 start promise1 timer1 promise2 timer2</script>

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 6 8 2 4 3 5 9 11 10 12

3. .then .catch会返回新的promise

<script>
Promise.resolve(1).then(res => {console.log(res);//return 2包装为resolve(2) 进入下一个.thenreturn 2;}).catch(err => {return 3;}).then(res => {console.log(res);});//输出 1 2
</script>

4. 返回任意一个非 promise 的值都会被包裹成 promise 对象

<script>
Promise.resolve().then(() => {//这里会被.then捕获return new Error('error!!!')
}).then(res => {console.log("then: ", res)
}).catch(err => {console.log("catch: ", err)
})
//输出"then: " "Error: error!!!"
</script>

5. .then .catch 的值不能是promise本身

<script>
const promise = Promise.resolve().then(() => {return promise;
})
//进入死循环
promise.catch(console.err)
</script>

6. 值透传

<script>//.then.catch传入非函数会发生值透传
Promise.resolve(1).then(2).then(Promise.resolve(3)).then(console.log)//输出1
</script>

7. .finally

• .finally()方法不管Promise对象最后的状态如何都会执行
• .finally()方法的回调函数不接受任何的参数，也就是说你在.finally()函数中是无法知道Promise最终的状态是resolved还是rejected的
• .finally的返回值如果在没有抛出错误的情况下默认会是上一个Promise的返回值
• .finally 本质上是then方法的特例

8. 捕获错误

Promise.reject('err!!!')//在这里reject的错误直接被.then的err捕获而不是进入.catch.then((res) => {console.log('success', res)}, (err) => {console.log('error', err)}).catch(err => {console.log('catch', err)})//输出error err!!!
//无论是thne还是catch中，只要throw 抛出了错误，就会被catch捕获
//如果没有throw出错误，就被继续执行后面的then
Promise.resolve().then(() => {console.log('1');throw 'Error';
}).then(() => {console.log('2');
}).catch(() => {console.log('3');throw 'Error';
}).then(() => {console.log('4');
}).catch(() => {console.log('5');
}).then(() => {console.log('6');
});
//输出1 3 5 6

9. promise.all和promise.race

function runAsync (x) {const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000))return p
}
//输出 1 2 3 [1，2 3]
//所有输入的promise都成功解析后返回数组
Promise.all([runAsync(1), runAsync(2), runAsync(3)]).then(res => console.log(res))
function runAsync (x) {const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000))return p
}
//输出 1 result:1 2 3
//promise.race只捕获第一个结果无论成功或失败，且不再捕获
Promise.race([runAsync(1), runAsync(2), runAsync(3)]).then(res => console.log('result: ', res)).catch(err => console.log(err))

Async await

async单独使用为同步，搭配await实现异步，可以理解为await后的语句放入new Promise中，下一行及之后放入promise.then中

1. async搭配promise

async function async1 () {console.log('async1 start');await new Promise(resolve => {//new Promise立即执行，但状态保持pending导致会暂停在这里console.log('promise1')//在这里执行resolve会使async1继续执行})console.log('async1 success');return 'async1 end'
}
console.log('srcipt start')
async1().then(res => console.log(res))
console.log('srcipt end')

2. async中抛出错误

async function async1 () {await async2();console.log('async1');return 'async1 success'
}
async function async2 () {return new Promise((resolve, reject) => {console.log('async2')//如果async函数中抛出了错误，就会终止错误结果，不会继续向下执行//如果想让其执行可以用catch捕获错误reject('error')})
}
async1().then(res => console.log(res))

作用域、变量提升、闭包

变量提升

1. 全局变量赋值给了一个局部变量

var x = y = 1; 实际上这里是从右往左执行的，首先执行y = 1, 因为y没有使用var声明，所以它是一个全局变量，然后第二步是将y赋值给x，讲一个全局变量赋值给了一个局部变量，最终，x是一个局部变量，y是一个全局变量，所以打印x是报错

(function(){var x = y = 1;
})();
var z;console.log(y); // 1
console.log(z); // undefined
console.log(x); // Uncaught ReferenceError: x is not defined

2. Function 和 var 都会变量提升

var friendName = 'World';
(function() {
//相当于这里多了一行var friendNameif (typeof friendName === 'undefined') {var friendName = 'Jack';console.log('Goodbye ' + friendName);} else {console.log('Hello ' + friendName);}
})();

3. function的变量提升

function fn1(){console.log('fn1')
}
var fn2fn1()
fn2()fn2 = function() {console.log('fn2')
}fn2()
//输出
//fn1
//Uncaught TypeError: fn2 is not a function
//fn2

作用域

function a() {var temp = 10;function b() {console.log(temp); // 10}b();
}
a();function a() {var temp = 10;b();
}
function b() {console.log(temp); // 报错 Uncaught ReferenceError: temp is not defined
}
a();

闭包

例一

function fun(n, o) {
//当传入实参多于形参时，剩下的形参为undefinedconsole.log(o)return {fun: function(m){//返回对象，再次进入fun,打印o//当作用域中没有n时，向上作用域寻找return fun(m, n);}};
}
//输出
//undefined  0  0  0
//undefined  0  1  2
//undefined  0  1  1
var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1);  c.fun(2);  c.fun(3);

例二

解释
由于在匿名函数中，又重新定义了函数g，就覆盖了外部定义的变量g，所以，这里调用的是内部函数 g 方法，返回为 true，当一个布尔值参与到条件运算的时候，true 会被看作 1, 而 false 会被看作 0。现在条件变成了 [] == 0 的问题了，当一个对象参与条件比较的时候，它会被求值，求值的结果是数组成为一个字符串，[] 的结果就是 ‘’ ，而 ‘’ 会被当作 0 ，所以，条件成立

f = function() {return true;};   
g = function() {return false;};   
(function() {   if (g() && [] == ![]) {   f = function f() {return false;};   function g() {return true;}   }   
})();   
console.log(f());