JS 执行顺序

JS 执行顺序

在编写JavaScript代码时，了解代码的执行顺序是非常重要的。JavaScript是一种解释型语言，在执行时会按照一定的规则来进行代码的执行。本文将详细解释JavaScript中代码的执行顺序，帮助读者更好地理解和优化自己的代码。

1. 代码解析

在执行JavaScript代码之前，首先会经过代码解析阶段。在这个阶段，JavaScript引擎会对代码进行词法分析和语法分析，确保代码的正确性。如果代码中有语法错误，会在这个阶段抛出错误并终止执行。

2. 全局代码执行

一旦代码解析完成，就会开始执行全局代码。在全局代码执行阶段，会进行全局变量的声明和初始化，并执行全局作用域中的代码。任何在全局作用域中的代码都会被执行，包括函数声明、变量声明和其他语句。

console.log("Global code execution");

function sayHello() {
  console.log("Hello, world!");
}

sayHello();

运行结果：

Global code execution
Hello, world!

3. 函数调用

在执行全局代码时，如果遇到函数调用，会进入函数的执行阶段。函数执行时会创建一个新的执行上下文，包括变量环境、词法环境等信息。函数中的代码会按照顺序执行，直到函数执行完成。

function foo() {
  console.log("Inside foo");
}

function bar() {
  console.log("Inside bar");
  foo();
}

console.log("Before function call");
bar();
console.log("After function call");

运行结果：

Before function call
Inside bar
Inside foo
After function call

4. 作用域链

在JavaScript中，作用域链决定了变量的访问顺序。当访问一个变量时，JavaScript引擎会按照变量所在的作用域链依次查找，直到找到变量为止。如果找不到变量，则会抛出ReferenceError错误。

var globalVar = "Global variable";

function outerFunc() {
  var outerVar = "Outer variable";

  function innerFunc() {
    var innerVar = "Inner variable";

    console.log(globalVar); // 访问全局变量
    console.log(outerVar); // 访问外部函数的变量
    console.log(innerVar); // 访问内部函数的变量
    console.log(localVar); // 抛出ReferenceError错误
  }

  innerFunc();
}

outerFunc();

5. 异步代码执行

在JavaScript中，有许多异步代码执行的方式，比如定时器、事件监听等。异步代码的执行顺序不是按照代码的编写顺序来执行的，而是依赖事件循环机制。当异步代码执行时，会先挂起，等待任务队列中的任务执行完成后再执行。

console.log("Before setTimeout");

setTimeout(function() {
  console.log("Inside setTimeout");
}, 0);

console.log("After setTimeout");

运行结果：

Before setTimeout
After setTimeout
Inside setTimeout

6. 微任务和宏任务

在JavaScript中，事件循环机制分为宏任务和微任务。宏任务包括定时器、事件监听等，而微任务则是Promise、MutationObserver等。微任务优先级高于宏任务，会在当前宏任务执行完成后立即执行。

console.log("Before setTimeout");

setTimeout(function() {
  console.log("Inside setTimeout");
}, 0);

Promise.resolve().then(function() {
  console.log("Inside Promise");
});

console.log("After setTimeout");

运行结果：

Before setTimeout
After setTimeout
Inside Promise
Inside setTimeout

结论

JavaScript代码的执行顺序是非常重要的，了解代码执行顺序可以帮助我们更好地理解和优化代码。在编写JavaScript代码时，需要注意代码的执行顺序，避免出现不可预料的结果。