004-执行上下文&事件循环

执行上下文&事件循环

💡 Tips:用于说明 浏览器 对 JavaScript 执行顺序,涉及知识点包含:this指向、变量声明提升、宏任务、微任务等

1、执行上下文

2、执行上下文类型

  1. 全局执行上下文

  2. 函数执行上下文

  3. Eval 函数执行上下文

3、执行上下文的生命周期

  1. 创建阶段

  2. 执行阶段

  3. 回收阶段

4、示例说明

javascript 复制代码
// console.log(a); // Uncaught ReferenceError: a is not defined

// 变量声明提升
console.log(b); // undefined
var b = 123;
console.log(b); // 123

// 函数声明提升
console.log(fn1); // fn1() {}
function fn1() {
  console.log(this);
}

// 全局执行上下文
console.log(this); // Window

// 函数执行上下文 - this指向调用方
fn1(); // Window
const obj1 = { name: 'zhangsan' };
fn1.apply(obj1);  // {name: 'zhangsan'}

5、事件循环机制

6、宏任务

7、微任务

8、同步任务、宏任务、微任务

javascript 复制代码
// 同步任务
var a = 123;
var b = 'zhangsan';
console.log(a);

// 异步任务 - 宏任务&微任务
// 宏任务
setTimeout(() => {
  console.log('setTimeout');
});

// 微任务
new Promise((resolve, reject) => {
  console.log('promise');
  resolve('promise');
}).then(res => {
  console.log('res-', res);
});

9、代码执行顺序 - 示例

javascript 复制代码
var a = 123;

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

new Promise((resolve, reject) => {
  console.log('promise');
  resolve('promise');
}).then(res => {
  console.log('res-', res);
});

// 先执行同步任务
// 第6行的打印:123
// 第9行的打印:promise

// 执行微任务
// 第12行的打印:res- promise

// 执行宏任务
// 第4行的打印:setTimeout
相关推荐
FogLetter几秒前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
Mxuan几秒前
vscode webview 插件开发(精装篇)
前端
Mxuan2 分钟前
vscode webview 插件开发(交付篇)
前端
Mxuan3 分钟前
vscode 插件与 electron 应用跳转网页进行登录的实践
前端
拾光拾趣录3 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
Codebee3 分钟前
OneCode图表配置速查手册
大数据·前端·数据可视化
然我4 分钟前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html
Mxuan5 分钟前
vscode webview 插件开发(毛坯篇)
前端
FogLetter7 分钟前
前端性能优化:深入理解回流与重绘
前端·css
清沫27 分钟前
键盘效率提升指南(VSCode+Vim+SurfingKeys)
前端·vim·visual studio code