JS `Global Object` (全局对象) 与 `Global Lexical Environment` (全局词法环境) 的创建与维护

各位观众老爷，欢迎来到今天的JavaScript奇妙夜！我是你们的老朋友，今晚咱们不聊八卦，专门扒一扒JS引擎里的两位大佬：Global Object（全局对象）和 Global Lexical Environment（全局词法环境），看看它们是如何被创建、维护，以及在代码执行中扮演什么角色的。准备好了吗？Let’s dive in!

第一幕：创世纪 – Global Object 的诞生

想象一下，宇宙大爆炸之后，最先出现的是什么？在JavaScript世界里，那就是Global Object（全局对象）。它是所有JS代码赖以生存的基础，是各种内置函数、对象和变量的家。

Global Object 的创建时机非常早，通常在JS引擎初始化的时候就完成了。具体来说，不同的宿主环境（浏览器、Node.js等）创建的Global Object略有不同，但它们都有一些共同的特征：

• 存储全局属性和函数： 像 window (浏览器环境)、global (Node.js环境)、Math、Date、parseInt、parseFloat 等等。这些都是预先定义好的，可以直接使用。
• 作为顶层作用域： 在最外层声明的变量和函数，都会自动成为Global Object的属性和方法。

我们用一个简单的例子来说明：

// 浏览器环境
var message = "Hello, Global Object!";

function greet() {
  console.log(message);
}

console.log(window.message); // "Hello, Global Object!"
greet(); // "Hello, Global Object!"

// 在浏览器控制台输入 window 可以看到 message 和 greet 都在里面

在浏览器中，window 就是 Global Object。我们声明的 message 变量和 greet 函数，都成为了 window 对象的属性和方法。

不同宿主环境的 Global Object：

宿主环境	Global Object	常用属性/方法
浏览器	window	document, alert(), setTimeout(), console
Node.js	global	process, require(), console, setTimeout()

第二幕：词法环境的奇妙世界 – Global Lexical Environment

有了 Global Object，还不够。我们需要一个地方来管理这些变量和函数的作用域，这就是Global Lexical Environment（全局词法环境）的作用。

词法环境（Lexical Environment）是JS引擎用来跟踪变量和函数声明的一种机制。它是一个包含两个组件的数据结构：

1. Environment Record（环境记录）： 存储变量和函数声明的实际位置。
2. Outer Environment Reference（外部环境引用）： 指向外部词法环境的指针。

Global Lexical Environment 的创建通常发生在 Global Object 创建之后，并且它的 Outer Environment Reference 是 null，因为它已经是顶层环境了。

Global Lexical Environment 的主要职责包括：

• 存储顶层声明： 存储在全局作用域中声明的变量和函数。
• 提供变量查找： 当JS引擎需要查找一个变量时，它首先会在当前的词法环境中查找，如果找不到，就沿着 Outer Environment Reference 向上查找，直到找到为止（或者到达最顶层的 Global Lexical Environment）。

我们来看一个例子：

var globalVar = "I'm global!";

function outerFunction() {
  var outerVar = "I'm in outerFunction!";

  function innerFunction() {
    var innerVar = "I'm in innerFunction!";
    console.log(globalVar); // "I'm global!"
    console.log(outerVar); // "I'm in outerFunction!"
    console.log(innerVar); // "I'm in innerFunction!"
  }

  innerFunction();
}

outerFunction();

在这个例子中，JS引擎会创建三个词法环境：

1. Global Lexical Environment： 存储 globalVar 和 outerFunction。
2. outerFunction 的词法环境： 存储 outerVar 和 innerFunction。 它的 Outer Environment Reference 指向 Global Lexical Environment。
3. innerFunction 的词法环境： 存储 innerVar。 它的 Outer Environment Reference 指向 outerFunction 的词法环境。

当 innerFunction 执行时，它会按照以下顺序查找变量：

1. 首先在自己的词法环境中查找 innerVar。
2. 然后在 outerFunction 的词法环境中查找 outerVar。
3. 最后在 Global Lexical Environment 中查找 globalVar。

这种沿着 Outer Environment Reference 向上查找的过程，就是所谓的作用域链。

第三幕：维护大师 – 如何保持全局环境的活力

Global Object 和 Global Lexical Environment 不是一成不变的，它们会随着代码的执行而不断更新。

Global Object 的维护：

• 添加属性和方法： 在全局作用域中声明新的变量和函数，会直接添加到 Global Object 上。
• 修改属性值： 可以修改 Global Object 上已有的属性值。
• 删除属性： 可以使用 delete 操作符删除 Global Object 上的属性（但有一些内置属性是不能删除的）。

// 添加属性
window.newProperty = "A new property!";
console.log(window.newProperty); // "A new property!"

// 修改属性值
window.newProperty = "Modified property!";
console.log(window.newProperty); // "Modified property!"

// 删除属性 (谨慎使用!)
delete window.newProperty;
console.log(window.newProperty); // undefined

Global Lexical Environment 的维护：

• 声明提升（Hoisting）： 在代码执行之前，JS引擎会将变量和函数的声明提升到它们所在作用域的顶部。这意味着你可以在声明之前使用变量和函数（尽管变量的值可能是 undefined）。
• 块级作用域 (ES6)： 使用 let 和 const 声明的变量具有块级作用域，它们不会被添加到 Global Object 上，而是存储在一个新的词法环境中。

// 变量提升
console.log(hoistedVar); // undefined
var hoistedVar = "I'm hoisted!";
console.log(hoistedVar); // "I'm hoisted!"

// 函数提升
hoistedFunction(); // "I'm hoisted too!"
function hoistedFunction() {
  console.log("I'm hoisted too!");
}

// 块级作用域
if (true) {
  let blockVar = "I'm in block!";
  console.log(blockVar); // "I'm in block!"
}
// console.log(blockVar); // ReferenceError: blockVar is not defined

第四幕：潜在的陷阱 – 全局变量的幽灵

全局变量虽然方便，但也容易引发一些问题：

• 命名冲突： 如果不同的代码库都使用了相同的全局变量名，可能会导致冲突。
• 污染全局命名空间： 过多的全局变量会使全局命名空间变得混乱，难以维护。
• 意外修改： 全局变量可以被任何代码修改，这可能会导致难以调试的bug。

为了避免这些问题，我们应该尽量减少全局变量的使用，可以使用以下方法：

• 使用立即执行函数表达式 (IIFE)： 将代码包裹在一个IIFE中，可以创建一个新的作用域，防止变量泄露到全局作用域。
• 使用模块化： 使用ES模块或CommonJS模块，可以将代码组织成独立的模块，避免全局变量的污染。
• 使用 let 和 const： 尽量使用 let 和 const 声明变量，避免意外地创建全局变量。

// 使用 IIFE
(function() {
  var localVariable = "I'm local!";
  console.log(localVariable); // "I'm local!"
})();

// console.log(localVariable); // ReferenceError: localVariable is not defined

第五幕：性能考量 – 全局变量的加速与减速

访问全局变量通常比访问局部变量要慢一些。这是因为JS引擎在查找全局变量时，需要沿着作用域链向上查找，直到到达 Global Lexical Environment。

但是，现代JS引擎对全局变量的访问进行了优化，使得性能差异变得很小。

以下是一些可以提高全局变量访问性能的技巧：

• 缓存全局变量： 将常用的全局变量缓存到局部变量中，可以减少查找次数。
• 避免频繁访问： 尽量减少对全局变量的频繁访问。

// 缓存全局变量
function processData() {
  const doc = document; // 缓存 document 对象
  for (let i = 0; i < 1000; i++) {
    doc.createElement('div'); // 使用缓存的 doc 对象
  }
}

第六幕：总结 – 理解全局环境的重要性

Global Object 和 Global Lexical Environment 是JavaScript引擎的核心组成部分。理解它们的工作原理，可以帮助我们更好地理解JS的作用域、变量提升和模块化等概念，从而写出更健壮、更高效的代码。

• Global Object是所有JS代码的基石，存储全局属性和函数。
• Global Lexical Environment管理全局作用域中的变量和函数。
• 尽量减少全局变量的使用，避免命名冲突和污染。
• 合理使用缓存和模块化，提高代码性能。

好了，今天的JavaScript奇妙夜就到这里。希望大家有所收获，下次再见！