javascript - 函数中的 JavaScript 作用域

Question

我有这个功能：

function loadCollapse() {
  function collapseDetail() {
    $(this).next().fadeToggle(500);
  }    

  //toggle the componenet with class summary  
  $("span.summary").unbind('click',collapseDetail);
  $("span.summary").click(collapseDetail);
}

此函数绑定到ajaxComplete()事件，也就是在所有 ajax 请求完成时执行。奇怪的是解除绑定不起作用。

它仅在collapseDetail()定义/移动到loadCollapse(). 为什么？

每次执行该函数时，函数内部的函数是否真的重新定义？

我需要担心由此产生的任何潜在的内存/性能问题吗？

Answer 1

每次调用该函数时，collapseDetail都会重新定义该函数，因此它将与您上次创建的函数不同。因为它是一个不同的函数，而不是你在第一次调用时绑定的那个，所以 unbind 不会有任何效果，因为这个新collapseDetail函数从未被绑定。

解决此问题的一种方法示例：

function generateLoadCollapse() {
    var collapseDetail = function() {
        $(this).next().fadeToggle(500);
    };

    var loadCollapse = function() {
        $("span.summary").unbind('click',collapseDetail);
        $("span.summary").click(collapseDetail);
    };

    return loadCollapse;
}

另一种方式可能是这样的：

function generateLoadCollapse() {
    return (function() {
        this.collapseDetail = function() {
            $(this).next().fadeToggle(500);
        };

        $("span.summary").unbind('click',this.collapseDetail);
        $("span.summary").click(this.collapseDetail);
    })();
}

然后，您可以将此函数返回的值分配给您之前的值loadCollapse：

loadCollapse = generateLoadCollapse();