js代码的执行顺序

在JavaScript中，代码的执行顺序主要遵循以下几个原则：

1. 同步执行

JavaScript代码默认是同步执行的，这意味着代码会从上到下逐行执行，直到遇到异步操作。

2. 事件循环（Event Loop）

JavaScript是单线程的，但它通过事件循环机制来处理异步操作。事件循环的基本流程如下：

• 执行同步代码。
• 执行微任务（Microtasks），如Promise的then回调。
• 执行宏任务（Macrotasks），如setTimeout回调。
• 重复上述步骤。

3. 异步编程

JavaScript提供了多种异步编程方式，如回调函数、Promise、async/await等。

回调函数

console.log('Start');
setTimeout(() => {
  console.log('Timeout');
}, 0);
console.log('End');

输出顺序：

Start
End
Timeout

Promise

console.log('Start');
Promise.resolve().then(() => {
  console.log('Promise then');
});
console.log('End');

输出顺序：

Start
End
Promise then

async/await

console.log('Start');
async function asyncFunc() {
  await Promise.resolve();
  console.log('Async await');
}
asyncFunc();
console.log('End');

输出顺序：

Start
End
Async await

4. 执行上下文（Execution Context）

JavaScript代码执行时会创建执行上下文，包括全局执行上下文和函数执行上下文。执行上下文的创建和执行过程如下：

1. 创建阶段（Creation Phase）：创建变量对象、建立作用域链、确定this的值。
2. 执行阶段（Execution Phase）：逐行执行代码，处理变量赋值、函数调用等。

5. 作用域链（Scope Chain）

JavaScript通过作用域链来查找变量。当代码在一个执行上下文中查找变量时，会先在当前上下文的变量对象中查找，如果找不到，则沿着作用域链向上查找，直到找到全局作用域。

6. 闭包（Closure）

闭包是指函数能够记住并访问其词法作用域，即使函数在其词法作用域之外执行。

function outer() {
  let count = 0;
  function inner() {
    count++;
    console.log(count);
  }
  return inner;
}

const counter = outer();
counter(); // 输出 1
counter(); // 输出 2

总结

• JavaScript代码默认同步执行。
• 通过事件循环处理异步操作。
• 提供了回调函数、Promise、async/await等异步编程方式。
• 执行上下文和作用域链决定了变量的查找和函数的执行。
• 闭包允许函数记住并访问其词法作用域。

了解这些基本概念有助于更好地理解和编写JavaScript代码，处理各种复杂的异步操作和作用域问题。