通過整個功能訪問變量

Question

我有以下功能：

var handsonTableHandler = (function () {

    var container = document.getElementById('WebGrid');
    var hot = "";

    var init = function () {

        //container is null here, why?
        Handsontable.renderers.registerRenderer('dataStyling', dataStyling);
        hot = new Handsontable(container, {
            startRows: 18,
            startCols: 24,
            autoWrapRow: true,
            width: 1400,
            height: 441,
            rowHeaders: true,
            colHeaders: true,
            outsideClickDeselects: false,
            search: true,
            manualColumnResize: true,
            stretchH: "all",
            afterChange: function (source, changes) {},
            cells: function (row, col, prop) {
                var cellProperties = {};
                cellProperties.renderer = "dataStyling"; // uses lookup map
                cellProperties;
            }
        });
    }
}

$(document).ready(function() {
   handsonTableHandler.init();
});

我希望container和hot變量可以通過整個函數訪問，因此可以在init函數和此處定義的其他函數中訪問。

如您所見，我正在使用Id WebGrid獲得該元素。 但是在init函數中，它為null。 為什么是這樣？

Answer 1

如果在內部函數中不可訪問，它將是“未定義”而不是“空”，因此可以訪問

你做了

var container = document.getElementById（'WebGrid'）;

但是document.getElementById（...）如果元素不存在，則返回Null，因此必須沒有ID為WebGrid的元素

嘗試在控制台中鍵入

document.getElementById('WebGrid')

如果它返回null，則首先沒有元素

現在將您的代碼更改為：

$(document).ready(function() {
var handsonTableHandler = (function () {

    var container = document.getElementById('WebGrid');
    var hot = "";

    var init = function () {

        //container is null here, why?
        Handsontable.renderers.registerRenderer('dataStyling', dataStyling);
        hot = new Handsontable(container, {
            startRows: 18,
            startCols: 24,
            autoWrapRow: true,
            width: 1400,
            height: 441,
            rowHeaders: true,
            colHeaders: true,
            outsideClickDeselects: false,
            search: true,
            manualColumnResize: true,
            stretchH: "all",
            afterChange: function (source, changes) {},
            cells: function (row, col, prop) {
                var cellProperties = {};
                cellProperties.renderer = "dataStyling"; // uses lookup map
                cellProperties;
            }
        });
    };
})();

handsonTableHandler.init();

}）;

Answer 2

在我看來，您似乎沒有運行該函數，因此從來沒有創建閉包，我添加了一些括號，這應該創建閉包：

var handsonTableHandler = function () {

var container = document.getElementById('WebGrid');
var hot = "";

var init = function () {

    //container is null here, why?
    Handsontable.renderers.registerRenderer('dataStyling', dataStyling);
    hot = new Handsontable(container, {
        startRows: 18,
        startCols: 24,
        autoWrapRow: true,
        width: 1400,
        height: 441,
        rowHeaders: true,
        colHeaders: true,
        outsideClickDeselects: false,
        search: true,
        manualColumnResize: true,
        stretchH: "all",
        afterChange: function (source, changes) {},
        cells: function (row, col, prop) {
            var cellProperties = {};
            cellProperties.renderer = "dataStyling"; // uses lookup map
            cellProperties;
        }
    });
}

return {init: init}
};

$(document).ready(function() {
   handsonTableHandler().init();
});

Answer 3

解決此問題的唯一方法是將DOM元素分配給init container ，如下所示：

var handsonTableHandler = (function () {

    var container,
        hot;

    var init = function () {

        container = document.getElementById('WebGrid');

        //container is null here, why?
        Handsontable.renderers.registerRenderer('dataStyling', dataStyling);
        hot = new Handsontable(container, {
            startRows: 18,
            startCols: 24,
            autoWrapRow: true,
            width: 1400,
            height: 441,
            rowHeaders: true,
            colHeaders: true,
            outsideClickDeselects: false,
            search: true,
            manualColumnResize: true,
            stretchH: "all",
            afterChange: function (source, changes) {},
            cells: function (row, col, prop) {
                var cellProperties = {};
                cellProperties.renderer = "dataStyling"; // uses lookup map
                cellProperties;
            }
        });
    }

})()

Answer 4

您可以更改函數以使用new語法創建處理程序並訪問.init函數

let handsonTableHandler = function () {
    this.container = document.getElementById('WebGrid');
    this.hot = "";
    this.init = function () {

        console.log('container', this.container);

        Handsontable.renderers.registerRenderer('dataStyling', dataStyling);
            this.hot = new Handsontable(this.container, {
            startRows: 18,
            startCols: 24,
            autoWrapRow: true,
            width: 1400,
            height: 441,
            rowHeaders: true,
            colHeaders: true,
            outsideClickDeselects: false,
            search: true,
            manualColumnResize: true,
            stretchH: "all",
            afterChange: function (source, changes) {},
            cells: function (row, col, prop) {
                var cellProperties = {};
                cellProperties.renderer = "dataStyling"; // uses lookup map
                cellProperties;
            }
        });
    }
}

let handler = new handsonTableHandler();

$(document).ready(function() {
   handler.init(); // output: container not null
});