你不知道的JavaScript执行机制，这样写代码更清晰

2023-12-24 16:17:39

局部变量和作用域

JavaScript是一种解释型语言，这意味着它的代码在运行时被解释执行。当JavaScript解释器执行代码时，它会创建一个执行上下文，该执行上下文包含了一些信息，包括局部变量、函数参数和this对象。

局部变量的作用域仅限于其所在的函数或代码块。这意味着在函数或代码块之外不能访问局部变量。例如：

function myFunction() {
  let tempColor = "red";
  console.log(tempColor); // 输出 "red"
}

myFunction();
console.log(tempColor); // 报错：tempColor is not defined

在上面的代码中，tempColor是myFunction函数的局部变量，只能在myFunction函数中访问。一旦myFunction函数执行完毕，tempColor变量就会被销毁。

this对象

this对象是一个特殊的内置对象，它代表着当前执行上下文中的对象。this对象的具体值取决于代码的执行环境。例如，在全局环境中，this对象的值是window对象。在函数中，this对象的值是函数所属的对象。

console.log(this); // 输出 window对象

function myFunction() {
  console.log(this); // 输出 myFunction所属的对象
}

myFunction();

在上面的代码中，this对象的值在全局环境中是window对象，在myFunction函数中是myFunction所属的对象。

箭头函数

箭头函数是一种简洁的函数语法，它使用箭头 (=>) 来定义函数。箭头函数没有自己的this对象，它会继承外层函数的this对象。例如：

const myArrowFunction = () => {
  console.log(this); // 输出 myFunction所属的对象
};

myFunction();

在上面的代码中，myArrowFunction箭头函数继承了myFunction函数的this对象，因此this对象的值是myFunction所属的对象。

闭包

闭包是指能够访问外部函数作用域中变量的函数。闭包可以用来共享数据和封装代码。例如：

function myFunction() {
  let tempColor = "red";

  return function() {
    console.log(tempColor); // 输出 "red"
  };
}

const myClosure = myFunction();
myClosure();