闭包与模块：JS 口袋书第 6 章中的核心概念

JS 口袋书：闭包与模块

闭包与模块是 JavaScript 中两个重要的概念，它们对于创建更强大、更可维护的代码非常有用。

闭包

闭包是 JavaScript 中一个重要的概念，它允许您访问在函数内部定义的变量，即使函数已经执行完毕。这可以通过使用嵌套函数来实现。例如，以下代码创建了一个闭包：

function outer() {
  let x = 10;

  function inner() {
    console.log(x);
  }

  return inner;
}

const innerFunction = outer();
innerFunction(); // 10

在这个例子中，inner 函数可以访问 outer 函数内部定义的变量 x，即使 outer 函数已经执行完毕。这是因为 inner 函数在 outer 函数内部定义，因此它可以访问 outer 函数的作用域。

模块

模块是 JavaScript 中的另一个重要概念，它允许您将代码组织成更小的、可重用的块。这可以通过使用 export 和 import 语句来实现。例如，以下代码创建了一个模块：

// my-module.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

这个模块可以从另一个模块中导入，如下所示：

// another-module.js
import { add, subtract } from './my-module.js';

console.log(add(1, 2)); // 3
console.log(subtract(4, 2)); // 2

模块可以帮助您将代码组织成更小的、可重用的块，这可以使您的代码更容易维护和重用。

全局变量

全局变量是可以在任何地方访问的变量。这通常是一个不好的做法，因为全局变量很容易被意外更改，从而导致错误。例如，以下代码使用全局变量 x：

let x = 10;

function outer() {
  x = 20;
}

function inner() {
  console.log(x); // 20
}

outer();
inner();

在这个例子中，outer 函数意外更改了全局变量 x，这导致 inner 函数输出 20，而不是预期的 10。

为了避免这种情况，您应该尽量避免使用全局变量。如果确实需要使用全局变量，则应将它们存储在对象中，如下所示：

const global = {
  x: 10
};

function outer() {
  global.x = 20;
}

function inner() {
  console.log(global.x); // 20
}

outer();
inner();

这样，您就可以确保全局变量只在您需要的时候才被更改。

window 对象

window 对象是浏览器中全局变量，它包含有关浏览器窗口的信息和方法。例如，您可以使用 window.location 属性来获取当前页面的 URL，如下所示：

console.log(window.location);

您还可以使用 window.open() 方法来打开一个新的浏览器窗口，如下所示：

window.open('https://www.google.com', '_blank');

window 对象是一个非常强大的对象，它可以用来做很多事情。有关 window 对象的更多信息，请参阅 MDN 文档。

作用域

作用域是变量可用的范围。例如，在以下代码中，变量 x 在 outer 函数的作用域中可用：

function outer() {
  let x = 10;
}

但是，变量 x 在 inner 函数的作用域中不可用：

function outer() {
  let x = 10;

  function inner() {
    console.log(x); // ReferenceError: x is not defined
  }
}

这是因为 inner 函数在 outer 函数内部定义，因此它只能访问 outer 函数的作用域。

作用域是一个非常重要的概念，它可以帮助您防止意外更改变量。有关作用域的更多信息，请参阅 MDN 文档。