js 对象属性访问全局变量

在 JavaScript 中，对象属性访问全局变量的情况通常发生在对象的某个方法内部引用了未在当前作用域内声明的变量。这时，JavaScript 引擎会沿着作用域链向上查找，直到找到该变量或者到达全局作用域。如果在全局作用域中找到了该变量，那么就会使用这个全局变量的值。

基础概念

作用域：定义了变量的可访问性。JavaScript 有函数作用域和块级作用域（ES6 引入的 let 和 const）。
作用域链：当代码在一个环境中执行时，会创建一个变量对象的作用域链，用于解析变量名。
全局变量：在全局作用域中声明的变量，可以在任何地方被访问。

类型

显式全局变量：通过 var 在全局作用域中声明的变量。
隐式全局变量：在函数内部未使用 var、let 或 const 声明的变量，会被自动创建为全局变量。

应用场景

配置信息：例如，应用程序的配置参数可以定义为全局变量，以便在整个应用程序中访问。
共享状态：在某些情况下，可能需要在多个模块或组件之间共享状态。

遇到的问题及原因

命名冲突：全局变量可能会与其他库或者代码中的变量发生冲突。
难以维护：全局变量使得程序的不同部分紧密耦合在一起，导致代码难以维护和理解。
意外的变量覆盖：全局变量可能会被不小心覆盖，导致程序出现难以追踪的错误。

如何解决这些问题

避免使用全局变量：尽量使用局部变量和参数传递数据。
使用模块：利用 ES6 模块系统（import/export）来封装代码，限制变量的作用域。
使用闭包：通过闭包来创建私有变量，只暴露必要的接口。
使用全局对象：在浏览器环境中，可以将全局变量放在 window 对象的一个命名空间下，减少全局命名空间的污染。

示例代码

// 不推荐的做法：隐式全局变量
function setGlobalVar() {
    globalVar = 'I am global'; // 没有使用 var、let 或 const 声明
}

setGlobalVar();
console.log(globalVar); // 输出: I am global

// 推荐的做法：使用模块
// myModule.js
const privateVar = 'I am private';
export function getPrivateVar() {
    return privateVar;
}

// main.js
import { getPrivateVar } from './myModule.js';
console.log(getPrivateVar()); // 输出: I am private

// 使用闭包
function createCounter() {
    let count = 0; // 私有变量
    return {
        increment: function() {
            count++;
            return count;
        }
    };
}

const counter = createCounter();
console.log(counter.increment()); // 输出: 1
console.log(counter.increment()); // 输出: 2

在上述代码中，我们展示了如何避免使用全局变量，并通过模块化和闭包的方式来管理变量的作用域。这样做可以提高代码的可维护性和可读性，同时减少潜在的错误和冲突。