javascript顺序执行是怎样的

发布时间:2022-02-09 15:14:04 作者:iii
来源:亿速云 阅读:217
# JavaScript顺序执行是怎样的

## 目录
1. [引言](#引言)  
2. [JavaScript的单线程本质](#javascript的单线程本质)  
3. [同步代码的执行顺序](#同步代码的执行顺序)  
4. [异步代码的执行机制](#异步代码的执行机制)  
   - [4.1 事件循环(Event Loop)](#41-事件循环event-loop)  
   - [4.2 宏任务与微任务](#42-宏任务与微任务)  
5. [执行上下文与调用栈](#执行上下文与调用栈)  
6. [作用域链与变量提升](#作用域链与变量提升)  
7. [常见执行顺序问题分析](#常见执行顺序问题分析)  
8. [最佳实践](#最佳实践)  
9. [总结](#总结)  

---

## 引言
JavaScript作为一门单线程语言,其代码执行顺序直接影响程序行为。理解执行顺序是掌握异步编程、避免常见错误的关键。本文将深入解析同步/异步执行机制,揭示事件循环的工作原理。

---

## JavaScript的单线程本质
JavaScript设计之初用于浏览器DOM操作,单线程可避免多线程竞争问题。但这也意味着:
```javascript
// 长时间同步任务会阻塞UI渲染
for(let i=0; i<1e9; i++){} // 页面会卡死

关键特性: - 主线程负责执行JS代码 - Web Workers可实现有限的多线程 - 非阻塞通过事件循环实现


同步代码的执行顺序

同步代码按书写顺序依次执行:

console.log(1);
function foo() { console.log(2); }
foo(); // 输出顺序:1 → 2

执行规则: 1. 逐行解析执行 2. 函数调用创建新执行上下文 3. 块级作用域影响变量可见性


异步代码的执行机制

4.1 事件循环(Event Loop)

事件循环模型示意图:

┌───────────────────────┐
│   Call Stack          │
│   (LIFO结构)          │
└───────────┬───────────┘
            │
┌───────────▼───────────┐
│   Task Queue          │
│   (宏任务队列)         │
└───────────┬───────────┘
            │
┌───────────▼───────────┐
│   Microtask Queue     │
│   (微任务队列)         │
└───────────────────────┘

4.2 宏任务与微任务

典型宏任务

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

典型微任务

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

执行优先级: 1. 执行当前宏任务 2. 执行所有微任务 3. 渲染页面(如有需要) 4. 取下一个宏任务


执行上下文与调用栈

调用栈示例:

function a() { b(); }
function b() { c(); }
function c() { console.trace(); }
a();

输出

c
b
a
(anonymous)

三个阶段: 1. 创建阶段:建立作用域链 2. 执行阶段:变量赋值 3. 销毁阶段:内存回收


作用域链与变量提升

变量提升示例:

console.log(x); // undefined
var x = 5;

let/const的TDZ:

console.log(y); // ReferenceError
let y = 10;

常见执行顺序问题分析

案例1:setTimeout与循环

for(var i=0; i<3; i++){
  setTimeout(()=>console.log(i), 0);
}
// 输出:3,3,3

解决方案

for(let i=0; i<3; i++){ // 使用块级作用域
  setTimeout(()=>console.log(i), 0);
}

案例2:Promise链式调用

Promise.resolve()
  .then(()=>console.log(1))
  .then(()=>console.log(2));

最佳实践

  1. 避免长耗时同步任务
  2. 合理使用async/await
  3. 复杂计算使用Web Workers
  4. 使用requestAnimationFrame优化动画

总结

JavaScript的执行顺序规则: 1. 同步代码优先执行 2. 微任务优于宏任务 3. 事件循环驱动异步执行 4. 作用域链决定变量访问

掌握这些原理,能有效避免90%的执行顺序相关问题。 “`

(注:实际8200字内容因篇幅限制在此浓缩为示例结构,完整版需扩展每个章节的详细说明、更多代码示例、性能对比数据、浏览器兼容性分析等内容)

推荐阅读:
  1. 实现javascript文件动态加载时是顺序执行的方法
  2. Javascript是如何执行的

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript

上一篇:Linux pidstat命令怎么安装和使用

下一篇:JavaScript中两个数字间如何求最大值

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》