javascript - Webpack Encore无法访问窗口[“var_name”]

根据下面的代码，我有一个变量mdcDialog，一旦页面加载，该变量就会用material-components-web（MDCDialog）库进行初始化。

在提交表单时，将阻止默认事件，而由ajaxSubmit()处理该表单。
响应是一个json对象，从中可以找到带有字符串值response.modal.modal的变量mdcDialog。

但是出于某种原因，console.info(window[response.modal.modal]);返回undefined而不是变量mdcDialog。
另一方面，执行console.log(mdcDialog)可以输出变量。

如果mdcDialog不起作用，如何从字符串响应中访问变量window？

app.js

/* --- VARS --- */
const page="#page";
let mdcDialog;

/* --- FUNCTIONS --- */
function ajaxSubmit(node) {
    $.ajax({
        type: node.attr("method"),
        url: node.attr("action"),
        enctype: "multipart/form-data",
        data: new FormData(node[0]),
        processData: false,
        contentType: false,
        cache: false
    }).done(function(response, status, xhr) {
        if(response !== false) {
            /** @var response.modal */
            if(typeof response.modal !== "undefined") {
                /** @var response.modal.action */
                /** @var response.modal.modal */
                /** @var response.modal.content */
                if(response.modal.action === "load") {
                    console.info(window[response.modal.modal]);
                }
            }
        }

    }).fail(function(request, status, error) {
        console.error(request);
        console.error(status);
        console.error(error);
    });
}

/* --- ACTIONS --- */
$(document).ready(function() {
    mdcDialog=new mdc.dialog.MDCDialog(document.querySelector("#dialog-level.mdc-dialog"));

    $(page).on("submit", ".ajs", function(e) {
        e.preventDefault();
        ajaxSubmit($(this));
    })
});

最佳答案

用let或const定义的变量具有块作用域，即使它们在最外部的作用域中定义，也不会被全局定义，因此will never be accessible through the global (window) object.

要使它们以这种方式可访问，必须使用var，或在全局对象本身上定义它们。

let foo=1
window.foo //undefined
foo        //1

var bar=2
window.bar //2
bar        //2

window.baz=3
window.baz //3
baz        //3

有关更多信息，请参见this SO answer