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

原创 于 2024-12-15 17:55:15 发布 · 926 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #前端 #笔记

这里写目录标题

异步事件循环

宏任务微任务

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) 进入下一个.then
    return 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 friendName
  if (typeof friendName === 'undefined') {
    var friendName = 'Jack';
    console.log('Goodbye ' + friendName);
  } else {
    console.log('Hello ' + friendName);
  }
})();

3. function的变量提升

function fn1(){
  console.log('fn1')
}
var fn2
 
fn1()
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) {
//当传入实参多于形参时，剩下的形参为undefined
  console.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());
Magic.462
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值