我们可以将浏览器 JavaScript 的执行上下文从 Window 对象更改为其他内容吗?



>假设我有一个名为module.js的遗留文件,如下所示:

a=1;

默认情况下,当您在浏览器中执行它时,这会附加到污染global(实际上是window(作用域的window对象。

我是否可以在不更改源代码内容的情况下将其附加到其他对象?

由于唯一真正的问题是执行上下文,没有别的,理想的解决方案是这样的:

change execution context from window to module object;
execute the code;
change execution context from module to window object;

如果这是不可能的,只要内部内容不改变,就可以将包装器(如 IIFE(添加到源代码中。更改内部内容需要对代码进行全面扫描,这很昂贵。

例如,我可以将其包装成这样的函数 (✓(:

function module()
{
a=1;
}

如果以严格模式执行,我可以避免全局范围的污染。但是,我无法掌握该对象。

我不想做这样的事情(✗(:

module = function module()
{
return a=1;
}

因为我们需要在有赋值的地方添加return,这意味着扫描整个代码。

我只是想看看以最小的努力改进浏览器遗留代码的方法。

第一个问题的答案是,不,无法在浏览器中更改默认执行上下文。window是一个特殊变量,为其分配任何其他内容都不会更改默认执行上下文。请参阅 MDN 中的全局对象。这是一个插图

(function() {
window = {}
a = 5 // leaking declaration
var b = 10
})()
console.log(a) // a is on global scope
//console.log(b) // exception b is not defined in this scope
var b = 5
window = new Object()
window.c = 5
console.log(window.b) // 5 
console.log(c)  // 5

关于如何使用遗留代码的第二部分的答案,有许多工具可以进行 AST 转换,根据您的目标,您可能应该使用其中的一个或多个。

  • JScodeShift允许您编写codemods哪些函数接收代码并对其应用转换。这可能是此类别中最强大的工具。
  • ESLint 允许您设置规则(例如没有全局变量(并具有--fix选项,该选项将在某些情况下应用自动修复,例如从单引号更改为双引号(这主要用于与样式相关的规则(。
  • Prettier是一个代码格式化程序,只关注代码外观:缩进,空格等。
  • AST 资源管理器是一个在线工具,可让您查看上述所有工具的内部结构,这对于了解其工作原理并尝试在小示例中编写代码非常有用。

最新更新