Javascript閉包返回undefined

Question

我繼承了我需要為我的工作更新的代碼庫。 我正在慢慢地學習他們正在嘗試使用現有的閉包來完成什么，但是在嘗試更新使用此功能的網站的一部分時我遇到了困難。 我將給出代碼試圖完成的基本概述，看看是否有人可以提供幫助。

var TheObject = (function (){
    var veryLargeDependantData = {
        var1: {}, 
        var2: {}, 
        var3: [],
        //Set these variables via functions
        function1: function f1(data){...}, 
        function2: function f2(data){...}, 
        initialize: function initialize() { //set values for var1... var3}
     };

     return {initialize: veryLargeDependentData.initialize};
})().initialize(); 

由於我顯然無法在網站上顯示生產代碼，因此必須這樣做。 但基本上，VeryLargeDependentData變量是函數的入口。 當頁面加載時，它調用初始化函數，一切都很愉快。 但是現在我需要將它添加到onclick事件和舊頁面，而firebug控制台說該變量是未定義的。 在其他頁面中，我可以毫無問題地使用它。

我的問題是，正在發生什么導致閉包不能成為像這樣的可調用命名空間的一部分。 我有點像javascript nOOb，所以如果問題聽起來有誤，我會道歉。

onclick='TheObject.initialize();'

Answer 1

我假設你的意思是你想在click事件處理程序中運行initialize函數，你現在正試圖這樣做：

TheObject.initialize();

如果是這種情況，問題是TheObject實際上引用了initialize的返回值，因為您在立即調用的函數表達式的返回值上調用了initialize 。 而且initialize的可能性是undefined （很可能，它沒有明確的return語句）。

要解決此問題，您可能希望刪除對initalize的立即調用，這將允許您在頁面加載和其他任何地方使用上面顯示的行。

Answer 2

在該代碼中，的值TheObject將無論veryLargeDependentData.initialize()方法返回。 如果initialize方法什么都不返回，那么TheObject將是未定義的。

一個簡化的例子：

var TheObject = (function () {
  return {
    initialize: function () { 
      // stuff happens here, but importantly, there's nothing returned
    }
  }
})().initialize();

您可以將其分解為以下執行順序：

// the value of step_one is a function that will return an object when it is run
var step_one = (function () {
  return {
    initialize: function () {
      // ...
    }
  }
});

// after running the function step_one, step_two will be an object
// containing one key - initialize - which is a function
var step_two = step_one();

// since initialize doesn't return anything, TheObject is set to undefined.
var TheObject = step_two.initialize();

您可以通過將TheObject設置為包含initialize方法的對象來解決此問題，然后在需要時再次運行該方法。

var TheObject = (function () {
  return {
    initialize: function () {
    }
  }
})();

// initialize
TheObject.initialize();

// and again
TheObject.initialize();

請注意！

原作者可能打算將初始化方法僅運行一次。 多次運行可能會在系統中引入錯誤！

Answer 3

看起來不必要地復雜，我不確定在這種情況下使用匿名函數和閉包獲得了什么。 有什么理由你不能簡單地做以下事情嗎？

var TheObject = {
    var1: {}, 
    var2: {}, 
    var3: [],
    //Set these variables via functions
    function1: function(data){...}, 
    function2: function(data){...}, 
    initialize: function(){alert("initialize");}
};

var initButton = document.getElementById("initButtonName");
initButton.addEventListener("click", TheObject.initialize);

請注意，您要刪除內聯事件。