JavaScript 预编译|极客笔记

JavaScript 预编译

在进行 JavaScript 开发时，我们经常会遇到一些代码在执行之前需要经过一些预处理操作的情况，这个过程就称为预编译。预编译可以帮助我们在代码执行之前处理一些任务，使得代码更加高效、易于维护。在本文中，我们将详细介绍 JavaScript 中的预编译过程，包括变量提升、函数提升、作用域和闭包等相关内容。

变量提升

在 JavaScript 中，变量提升是指在代码执行之前，JavaScript 引擎会将所有的变量声明提升到当前作用域的顶部。这意味着，无论在何处声明一个变量，它都会被提升到作用域的顶部，因此在变量声明之前就可以访问到该变量。例如：

console.log(a); // 输出 undefined
var a = 10;

// 等价于
var a;
console.log(a); // 输出 undefined
a = 10;

上面的代码中，虽然变量 a 是在打印操作之前声明的，但由于变量提升的存在，我们仍然可以在声明之前访问到该变量。需要注意的是，只有变量声明会被提升，赋值操作并不会被提升。因此，如果在变量提升之前尝试访问未赋值的变量，会得到 undefined。

函数提升

除了变量提升外，JavaScript 中还存在函数提升的特性。与变量提升类似，JavaScript 引擎会将所有函数声明提升到当前作用域的顶部，这意味着我们可以在函数声明之前调用该函数。例如：

foo(); // 输出 "hello"
function foo() {
  console.log("hello");
}

// 等价于
function foo() {
  console.log("hello");
}
foo(); // 输出 "hello"

上面的代码中，虽然在调用函数之前声明了该函数，但由于函数提升的特性，我们仍然可以在声明之前调用该函数。

需要注意的是，只有函数声明会被提升，函数表达式不会被提升。例如：

bar(); // 报错：bar is not a function
var bar = function() {
  console.log("world");
};

在上面的代码中，由于变量 bar 是通过函数表达式赋值的，而不是函数声明，因此并不会被提升，导致在调用前就会报错。

作用域

作用域是指在程序中定义变量的区域，它决定了变量在何处可以被访问。JavaScript 中有全局作用域和局部作用域两种类型。全局作用域是指在代码任何地方都可以访问到的作用域，而局部作用域是指只能在特定区域内访问到的作用域。

全局作用域

全局作用域是指在代码的最外层定义的变量，它可以在任何地方被访问到。例如：

var globalVar = "I am in global scope";

function showGlobalVar() {
  console.log(globalVar);
}

showGlobalVar(); // 输出 "I am in global scope"

在上面的代码中，变量 globalVar 是在全局作用域中定义的，因此可以在 showGlobalVar 函数中被访问。

局部作用域

局部作用域是指在函数内部定义的变量，它只能在该函数内部被访问到。例如：

function showLocalVar() {
  var localVar = "I am in local scope";
  console.log(localVar);
}

showLocalVar(); // 输出 "I am in local scope"

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

在上面的代码中，变量 localVar 是在 showLocalVar 函数中定义的，因此只能在函数内部被访问，外部无法访问。

闭包

闭包是指在一个函数内部定义的函数，并且内部函数可以访问外部函数的作用域。闭包可以帮助我们在 JavaScript 中实现一些高级的功能。例如：

function outerFunction() {
  var outerVar = "I am in outer scope";

  function innerFunction() {
    console.log(outerVar);
  }

  return innerFunction;
}

var innerFunc = outerFunction();
innerFunc(); // 输出 "I am in outer scope"

在上面的代码中，innerFunction 是在 outerFunction 内部定义的，并且可以访问 outerFunction 的作用域，因此可以在 outerFunction 外部被调用，并且访问到 outerVar 变量。

闭包在 JavaScript 开发中经常用于模块化开发、事件处理等场景，它可以帮助我们更好地管理变量和函数，避免全局变量污染等问题。