我的关闭不起作用

Question

我试图防止用一堆变量污染全局空间，由于我还不能使用let，所以我必须关闭。所以我有这个带有引导手风琴的基本网页，每张卡片都隐藏着不同的例子。在一个表格中，我有一个表格，在<select> 中询问您的职位是什么。 OnChange 它将获取 eventData 对象，调用spillObject()（闭包方法），并用其内容填充另一个手风琴卡。 它可以工作，但问题是，我似乎无法让它作为一个简单的闭包工作。似乎什么都没有发生，而且由于您无法调试闭包，除了让它到处吐出 console.logs() 之外，我无法找出它有什么问题。

代码如下：

$(function() {

    $("#position").change( /*(*/ function(eventData) {
        var div = $('#explodedObject');
        div.html('');
        var result = spillObject('#explodedObject', eventData, '');
        /*};*/
        div.append(result);

    } /*)()*/ );


    var spillObject = (function(dataParent, obj, heirarchy) {
        var heirArr = heirarchy == '' ? [] : heirarchy.split('_');
        heirArr.push(1);
        var teir = heirArr.length - 1;

        var id = "#collapse" + heirArr.join('');
        var headerID = 'header' + heirArr.join('');



        var card = document.createElement('div');
        card.classList.add('card');


        var cardHeader = document.createElement('div');
        cardHeader.classList.add('card-header');
        cardHeader.id = headerID;
        var h5 = document.createElement('h5');
        h5.classList.add('mb-0');
        var button = document.createElement('button');
        button.classList.add('btn', 'btn-link');
        button.setAttribute('data-toggle', 'collapse');
        button.setAttribute('data-target', id);


        var cardBody = document.createElement('div');
        cardBody.classList.add('card-body');
        var collapse = document.createElement('div');

        collapse.id = id.substr(1, id.length - 1);
        collapse.classList.add('collapse');
        collapse.setAttribute('data-parent', dataParent);


        var dl = document.createElement('dl');
        dl.id = '#' + heirArr.join('');
        var dt;
        var dd;
        var x;
        return function() {

        for (x in obj) {
                dt = document.createElement('dt');
                dd = document.createElement('dd');

                dt.innerHTML = x;
                if (typeof obj[x] == 'object' && heirArr.length < 3) {
                    heirArr[teir]++;

                    innerObj = spillObject(dl.id, obj[x], heirArr.join('_'));
                    dd.appendChild(innerObj);
                } else {
                    dd.innerHTML = obj[x];
                }

                dl.append(dt);
                dl.append(dd);
            }

            heirArr.pop();
            heirArr[heirArr.length - 1] = parseInt(heirArr[heirArr.length - 1]);
            heirArr[heirArr.length - 1]--;

            collapse.appendChild(cardBody);

            button.innerHTML = 'card ' + heirArr.join('.');
            h5.appendChild(button);
            cardHeader.appendChild(h5);
            card.appendChild(cardHeader);
            card.appendChild(collapse);
            cardBody.appendChild(dl);
            return card;
        };
    });

})();

基本上，我正在遵循这个模板：

var method = (function(param){
    var var1 = 'default value';

    return function(){
        var1 = 'something else';
    };
})();

我应该改用这个吗，如果是的话，它会隐藏变量吗？

var method2 = function(param) {
        return function() {
            var var1 = 'default value';
        };
    };

Answer 1

这是因为spillObject 的结果是一个函数，所以你必须同时调用该函数。这是您正在执行的操作的简化版本。

var spillObject = (function(dataParent, obj, heirarchy) {
  
  console.log('first function')
  
  return function() {
    console.log('second function')
  };
  
});

var result = spillObject()

console.log(result)

result()