能否修改浏览器JavaScript执行上下文？遗留JS如何避免全局污染？

好问题！这两个本质上是同一个核心需求——改变代码执行时的上下文，避免全局污染。我来给你详细解答：

首先得明确一个关键点：纯全局级别的代码（不在任何函数包裹内）的执行上下文this默认绑定到window，无法直接修改。但我们可以通过「把代码包裹到函数中，修改函数的执行上下文」的方式，模拟出代码在自定义对象上下文中执行的效果。

函数的执行上下文this是灵活可控的，我们可以通过call()、apply()、bind()等方法指定函数运行时的this指向，这也是解决第二个问题的核心思路。

完全可以实现！针对你提到的遗留代码场景，这里有两种实用方案：

方案一：eval + call() 快速实现 #

我们可以将读取到的module.js代码放到一个函数里，通过call()把函数的this绑定到自定义对象上，这样未声明的变量赋值就会挂载到这个对象上：

// 1. 创建我们的目标模块对象
const myCustomModule = {};

// 2. 假设已经获取到module.js的代码内容（比如通过fetch异步读取）
const legacyCode = 'a=1;';

// 3. 定义一个执行函数，用call指定上下文
function executeInContext(code) {
  eval(code);
}
// 让函数在myCustomModule的上下文中执行
executeInContext.call(myCustomModule, legacyCode);

// 验证结果
console.log(myCustomModule.a); // 输出 1
console.log(window.a); // 输出 undefined（未被污染）

方案二：new Function() 更安全的动态执行 #

如果觉得eval不够安全（毕竟它会直接在当前作用域执行代码），可以用new Function()来动态创建函数，再通过call()绑定上下文：

const myCustomModule = {};
const legacyCode = 'a=1;';

// 动态生成函数，函数体就是遗留代码
const runLegacyCode = new Function(legacyCode);
// 指定上下文执行函数
runLegacyCode.call(myCustomModule);

console.log(myCustomModule.a); // 1
console.log(window.a); // undefined

重要注意事项 #

• 这两种方案仅适用于非严格模式的代码：如果你的遗留代码开启了严格模式（'use strict'），未声明的变量赋值会直接抛出ReferenceError，这种情况下就必须修改源码添加变量声明了。
• 如果是从外部加载module.js，要注意跨域问题：确保页面和脚本同域，或者服务器配置了CORS允许跨域读取。

内容的提问来源于stack exchange，提问作者Nishant