Question

我有以下功能：

personFromPersonStore("whatevername","whateverage").name

我希望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变量可以通过整个函数访问，因此，在init函数和此处定义的其他函数中。

正如您所看到的，我正在使用Id WebGrid获取元素。但是在init函数中，它是null。这是为什么？

Answer 1

如果它在内部函数中不可访问，那么它将是＆＃34; Undefined＆＃34;而不是＆＃34; Null＆＃34;因此它是可访问的

你做了

var container = document.getElementById（＆＃39; WebGrid＆＃39;）;

但是如果元素不存在，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中的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; } }); } })()，如下所示：

app.get('/:route', (req, res) => {
  // to the name the name of the route parameter.
  let route = req.params.route;
  if (route === 'tech') {
    // do sth
  } else if (route === 'location') {
    // do sth
  } else {
    // do sth.
  }
})

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
});

通过整个功能使变量可访问

4 个答案: