Question

我正在将代码从ES5升级到ES6。在ES5中，我通过创建一个新脚本来动态加载函数，然后异步加载文件。代码如下：

loadClass : function(className) {
    if(typeof window[className] !== "function") {
        page.getCode(className, dirName);
        return;
    } ...


getCode(className) {
    var fileName = className.toLowerCase();
    var newScript = document.createElement('script');
    newScript.setAttribute("type", "text/javascript");
    newScript.setAttribute("src", '/public/js/' + fileName + '.js');
    var parmArr = [className];
    newScript.addEventListener('load', this.loadClass.bind("", parmArr));
    document.getElementsByTagName("head")[0].appendChild(newScript);
    return;
}

在ES5中，该函数被加载到全局范围，在本例中是窗口。我在字符串中有函数/类名，我可以使用window [classname]引用该类，如上面的代码所示。在ES6中，我将调用和调用函数更改为类。现在当它加载脚本时，它在全局范围内作为Myclass function（）存在，但不在Chrome调试器中显示的窗口范围内，如下所示：

Myclass ()
[[Scopes]] : Scopes[2]
    0 : Script
        Myclass () : ()

我不能再用变量作为window [classname]引用它。抓住吸管我也试过[classname]，global [classname]和Global [classname]以及这个[classname]和script [classname]，但这不起作用。

在ES6中，当类名在变量中时，如何测试它是否已经加载？这可能是非常简单的事情，但它让我望而却步。

提前致谢

Answer 1

这就是ES6的工作方式......为了避免污染全局对象（此处为window），您的JavaScript代码不再创建全局属性（除非您是明确的）。在ES5中，在全局范围内使用var或function时会自动创建这些属性。使用let，const或class，没有任何反应。考虑这个例子：

// ES5

var foo;

function qux() {}

console.log('foo' in window); // true
console.log('qux' in window); // true

// ES6

let bar;
const baz = '';

class Quux {}

console.log('bar' in window); // false
console.log('baz' in window); // false
console.log('Quux' in window); // false

window.bar = bar;
window.baz = baz;
window.Quux = Quux;

console.log('bar' in window); // true
console.log('baz' in window); // true
console.log('Quux' in window); // true

Javascript ES6在全局范围内引用变量但不在窗口范围

1 个答案: