JS 全局变量的严格控制：避免使用隐式全局变量

各位靓仔靓女，老少爷们，欢迎来到今天的JS全局变量控制专题讲座！我是今天的讲师，人称代码界的段子手（并没有），今天咱们就来聊聊这个让人头疼又不得不面对的“全局变量”问题。

全局变量：爱恨交织的“老大哥”

全局变量就像一个家庭里辈分最高的“老大哥”，谁都能找他，谁都能用他。方便是真方便，但坏处也是实实在在。一旦“老大哥”出了问题，整个家庭都要跟着遭殃。

在JS的世界里，全局变量就是那些在任何函数之外声明的变量，或者是不小心“溜”进全局作用域的变量。它们在整个脚本的任何地方都可以访问，这既是它们的优势，也是它们最大的坑。

全局变量的“原罪”：隐式全局变量

咱们先来说说最容易犯，也是最致命的错误：隐式全局变量。

啥叫隐式全局变量？简单说，就是你没用 var、let 或 const 声明，直接使用的变量。JS 引擎一看，呦呵，你没声明啊，那我就把它当成全局变量处理了！

举个例子：

function myFunction() {
  myVariable = "Hello, world!"; // 隐式全局变量！大写的坑！
  console.log(myVariable);
}

myFunction();
console.log(myVariable); // 也能访问到，因为它已经是全局变量了！

在这个例子里，myVariable 在 myFunction 内部没有使用 var、let 或 const 声明，所以 JS 引擎就把它“提升”到了全局作用域。这就造成了一个隐式全局变量。

隐式全局变量的危害：

危害	描述	例子
命名冲突	如果你不小心使用了和已存在的全局变量相同的名字，就会覆盖掉原来的变量，导致意想不到的错误。	你定义了一个全局变量 `name`，然后另一个库也定义了一个全局变量 `name`，你的 `name` 就被覆盖了。
代码可读性差	隐式全局变量会让代码难以理解。你需要仔细检查整个代码库才能确定一个变量是在哪里定义的。	在大型项目中，你看到一个 `count` 变量，你很难知道它是从哪里来的，是不是全局变量，它的作用是什么。
难以调试	当出现错误时，很难追踪隐式全局变量的来源，调试起来非常痛苦。	一个隐式全局变量导致了一个奇怪的 bug，你需要花很长时间才能找到这个变量的定义和修改位置。
内存泄漏	全局变量会一直存在于内存中，直到页面关闭。如果你创建了大量的全局变量，可能会导致内存泄漏，影响性能。	你创建了一个很大的全局数组，但是你忘记释放它了，它会一直占用内存。

如何避免隐式全局变量？

永远使用 var、let 或 const 声明变量！ 这是最简单也是最有效的方法。养成良好的编码习惯，永远不要忘记声明变量。
```
function myFunction() {
  var myVariable = "Hello, world!"; // 显式声明，安全可靠！
  console.log(myVariable);
}
```
使用严格模式 ("use strict";)。 严格模式会强制你声明变量，如果使用未声明的变量，会抛出错误。
```
"use strict"; // 开启严格模式！

function myFunction() {
  myVariable = "Hello, world!"; // 报错！ ReferenceError: myVariable is not defined
  console.log(myVariable);
}

myFunction();
```
强烈建议在你的所有 JS 文件中都加上 "use strict";。它能帮你避免很多潜在的问题。

显式全局变量：谨慎使用

虽然我们要尽量避免隐式全局变量，但有时候，我们确实需要使用全局变量。比如，定义一些全局配置，或者暴露一些公共的 API。

但是，即使是显式全局变量，也要谨慎使用。尽量减少全局变量的数量，避免污染全局命名空间。

如何声明显式全局变量？

在全局作用域中使用 var、let 或 const 声明变量。

var globalVariable = "I'm a global variable!";
let globalVariable2 = "I'm another global variable!";
const GLOBAL_CONSTANT = "I'm a global constant!"; // 常量通常使用大写

将变量添加到 window 对象（在浏览器中）。
```
window.myGlobal = "Hello from window!";
console.log(myGlobal); // 可以访问到
```
注意： 在 Node.js 环境中，全局对象是 global，而不是 window。

全局变量的替代方案：模块化

随着前端技术的发展，我们有了更好的管理代码的方式：模块化。

模块化可以将代码分割成独立的模块，每个模块都有自己的作用域，可以避免全局变量的污染。

常见的模块化方案：

ES Modules (ESM)：这是 JavaScript 官方的模块化标准。使用 import 和 export 关键字来导入和导出模块。

// moduleA.js
export const myVariable = "Hello from module A!";

// moduleB.js
import { myVariable } from "./moduleA.js";
console.log(myVariable); // "Hello from module A!"

CommonJS (CJS)： Node.js 使用的模块化方案。使用 require() 和 module.exports 来导入和导出模块。

// moduleA.js
module.exports = {
  myVariable: "Hello from module A!",
};

// moduleB.js
const moduleA = require("./moduleA.js");
console.log(moduleA.myVariable); // "Hello from module A!"

AMD (Asynchronous Module Definition)：主要用于浏览器环境的异步模块加载。使用 define() 函数来定义模块。

// moduleA.js
define(function () {
  return {
    myVariable: "Hello from module A!",
  };
});

// moduleB.js
require(["./moduleA.js"], function (moduleA) {
  console.log(moduleA.myVariable); // "Hello from module A!"
});

使用模块化，可以将变量限制在模块内部，避免全局污染，提高代码的可维护性和可重用性。

最佳实践：

尽可能使用 let 和 const 声明变量。 let 和 const 具有块级作用域，可以更好地控制变量的可见性。
避免使用 var。 var 声明的变量具有函数作用域，容易造成变量提升的问题。
优先使用模块化。 模块化是管理大型 JavaScript 项目的最佳实践。

如果必须使用全局变量，尽量使用命名空间。 可以将相关的全局变量放在一个对象中，避免命名冲突。

// 使用命名空间
var myApp = myApp || {}; // 防止覆盖已存在的 myApp 对象
myApp.config = {
  apiUrl: "https://api.example.com",
};
myApp.utils = {
  formatDate: function (date) {
    // ...
  },
};

使用 ESLint 等代码检查工具。 ESLint 可以帮助你检查代码中的潜在问题，包括隐式全局变量。

一些额外的“小贴士”：

立即执行函数表达式 (IIFE)。 IIFE 可以创建一个独立的作用域，防止变量泄露到全局作用域。

(function () {
  var myVariable = "I'm inside an IIFE!";
  console.log(myVariable);
})();

// console.log(myVariable); // 报错！ ReferenceError: myVariable is not defined

闭包。 闭包可以让你访问函数外部的变量，但不会将这些变量暴露到全局作用域。

function createCounter() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

// console.log(count); // 报错！ ReferenceError: count is not defined

总结：

全局变量就像一把双刃剑，用好了可以提高效率，用不好就会带来灾难。记住以下几点：

坚决避免隐式全局变量！
谨慎使用显式全局变量！
拥抱模块化！
使用代码检查工具！

希望今天的讲座能帮助大家更好地管理全局变量，写出更健壮、更易维护的 JavaScript 代码。记住，代码质量决定了你的程序员生涯的长度！

最后，送大家一句编程界的至理名言：

“代码虐我千百遍，我待代码如初恋。”

感谢大家的聆听！下课！

发表回复 取消回复

发表回复取消回复