立即自動執行功能和「這個」

我想創建一個JavaScript庫，所以我認爲使它成爲一個立即執行自動執行的函數將是一件很好的事情來確保範圍安全性和一切。立即自動執行功能和「這個」

但現在我遇到了一個問題，使用「我」不太明白的「this」關鍵字。

如何使這樣的代碼正確工作？目前，它告訴我「圖像」是未定義的。

(function() { 

    function lib() { 
     this.image = document.getElementById("image"); 
     this.parts = [ 
      {name: "part1", num: "1"} 
     ]; 

     this.init = function() { 
      $(parts).each(function() { 
       var partNum = this.num; 
       image.getElementById(partNum).addEventListener("click", function() { 
        toggleHighlight(partNum); 
       }, true); 
      }); 
     }; 
    } 

    window.lib = new lib(); 
})(); 

window.lib.init();

如何訪問image屬性？

來源

2011-05-26 Florian Peschka

您是否嘗試過使用FireBug或Opera DragonFly等工具進行調試？大多數情況下，您可以看到當前範圍是什麼以及定義了哪些變量。 – Marc 2011-05-26 13:07:58

我覺得你這裏有幾個問題：

你在你的init功能指引parts，而無需訪問它作爲this的財產。
在each區塊內，您正在訪問image作爲全局變量，但未在全局範圍內聲明。您無法在該塊中訪問this中的image，因爲在該上下文中，this實際上設置爲您正在迭代的項目。（這就是爲什麼你可以訪問this.num。）

我建議你包括var that = this;在你的初始化函數之前，在訪問諸如that.image之類的屬性時使用它。

var that = this; 
this.init = function() { 
    $(this.parts).each(function() { 
     var partNum = this.num; 
     that.image.getElementById(partNum).addEventListener("click", function() { 
      toggleHighlight(partNum); 
     }, true); 
    }); 
};

來源

2011-05-26 13:31:05 Mario

如果我理解您的權利，您希望通過您提供給each的匿名函數訪問lib函數中定義的this.image屬性。要做到這一點，你需要保持this使其在匿名函數可用：

this.init = function() { 
    var self = this; 
    $(parts).each(function() { 
     //do something with self.image 
     self.image; 
    }); 
};

來源

2011-05-26 13:27:02 bjornd

你也應該利用的函數名lib的第一個字母，因爲你希望它被用作與new關鍵字構造。看看Javascript The Good Parts的作者對constructor naming conventions in JavaScript的評論。

來源

2011-05-26 13:39:56 Mario

立即自動執行功能和「這個」

回答

相關問題