全局变量与window对象的关系变化

ECMAScript 6（ES6）对全局变量的处理方式进行了显著调整，尤其是与window对象的关系发生了变化。这些改动影响了变量声明、作用域以及全局对象的属性绑定机制，需要开发者重新理解传统全局变量与浏览器环境的关系。

全局变量与window对象的传统关系

在ES5及更早版本中，通过var声明的全局变量会自动成为window对象的属性。这种设计源于JavaScript在浏览器环境中的实现方式：

var globalVar = 'ES5 variable';
console.log(window.globalVar); // 输出: 'ES5 variable'

函数声明同样会绑定到window对象：

function globalFunc() {
  return 'ES5 function';
}
console.log(window.globalFunc()); // 输出: 'ES5 function'

这种机制导致全局命名空间污染问题，所有脚本文件的全局变量都会共享同一个window对象。

ES6的变量声明方式变化

ES6引入了let、const和模块化机制，从根本上改变了全局变量的行为：

let和const的全局声明

使用let或const在全局作用域声明的变量不会自动成为window对象的属性：

let es6Let = 'block scoped';
const es6Const = 42;

console.log(window.es6Let);    // undefined
console.log(window.es6Const);  // undefined

这些变量存在于全局词法环境而非全局对象中，可以通过globalThis在任意上下文中访问：

console.log(globalThis.es6Let); // 仍然undefined，因为未绑定到全局对象

模块作用域的影响

在ES6模块中（使用type="module"的script标签），顶级作用域的变量声明不会成为全局对象的属性：

<script type="module">
  let moduleScoped = 'not global';
  console.log(window.moduleScoped); // undefined
</script>

全局对象的新访问方式

ES2020标准化了globalThis作为跨环境的全局对象访问方式：

// 浏览器环境
console.log(globalThis === window); // true

// Node.js环境
console.log(globalThis === global); // true

// 通用访问方式
globalThis.standardProperty = 'universal';

全局变量隔离机制

ES6通过以下机制实现全局隔离：

1. 脚本作用域：传统<script>标签共享同一个全局对象
2. 模块作用域：每个模块拥有独立的顶级作用域
3. 全局词法环境：let/const声明的全局变量存在于独立环境

示例对比：

// 传统脚本
<script>
  var shared = 'visible';
</script>
<script>
  console.log(window.shared); // 'visible'
</script>

// 模块脚本
<script type="module">
  let isolated = 'hidden';
</script>
<script type="module">
  console.log(isolated); // ReferenceError
</script>

内置对象的变更

ES6将部分内置对象从全局对象转移到其他位置：

// ES5
console.log(window.Array === Array); // true

// ES6新增的内置对象
console.log(window.Symbol);       // 存在
console.log(window.WeakMap);      // 存在
console.log(window.Promise);      // 存在

// 但某些API不再挂载到window
console.log(window.globalThis);   // 在支持的环境中可用

实际影响与迁移考虑

现有代码迁移时需要注意：

1. 特性检测应改用globalThis：

// 旧方式
if (window.Promise) {...}

// 新方式
if (globalThis.Promise) {...}

2. polyfill加载需要考虑作用域：

// 传统polyfill会影响window
window.Promise = MyPromisePolyfill;

// 模块化polyfill只影响当前模块
import Promise from 'es6-promise';

3. 跨窗口通信需要显式引用：

// 父窗口访问iframe
const iframeWindow = document.getElementById('frame').contentWindow;
iframeWindow.postMessage(/*...*/);

// 不再能通过隐式的window链访问

严格模式下的行为强化

ES6模块自动启用严格模式，进一步限制全局变量泄漏：

// 在模块中
undeclaredVar = 'leak'; // 抛出ReferenceError

// 非模块脚本中
undeclaredVar = 'leak'; // 创建window.undeclaredVar

动态代码执行的变化

通过eval执行的代码行为也发生变化：

// 直接eval
function testEval() {
  eval('var evalVar = "leaked"');
  console.log(evalVar);       // 'leaked' (非严格模式)
  console.log(window.evalVar); // undefined (ES6环境下)
}

// 间接eval
const indirectEval = eval;
indirectEval('var indirectVar = 123');
console.log(window.indirectVar); // 123 (仍然污染全局)