與'原型'混淆（Firefox擴展）

我正在開發一個Firefox擴展，我想我現在已經對Javascript有一個基本的誤解，'原型'的概念是確切的。請看下面的小例子，注意區別，當我設置變量this.demo和this.test：與'原型'混淆（Firefox擴展）

var Example = new Array(); 

    Example.Foo = function() { 
    this.test = null; 
    this.demo = "World"; 
    }; 

    Example.Foo.prototype = { 

    initialize : function(resource) { 
     this.test = "Hello"; 
     this.display(); 
    }, 

    display : function() { 
     alert(this.test + " " + this.demo); 
    }, 
    } 

    window.addEventListener(
    "load", 
    function() { 
     window.obj = new Example.Foo(); 
     obj.initialize(); 
    }, 
    false 
);

當打開火狐我得到預期的輸出：

Hello World

這個作品一貫精細本只要在js源文件中調用display（）'即可。然而，當我調用顯示（）通過相應的點擊從一個菜單項，例如：

... 
    <menupopup id="menu_ToolsPopup"> 
     <menuitem label="Example" oncommand="obj.display();"/> 
    </menupopup> 
...

我得到：

null World

初始化（）被稱爲事前當然，。

我還是比較新的Javascript和現有的代碼工作。因此，我很困惑目前的行爲。什麼是最好的解決方案是工作？

來源

2011-11-08 Christian

查閱這些兩篇文章：http://www.javascriptkit.com/javatutors/oopjs2.shtml和http://mckoss.com/jscript/object.htm - 你的代碼是怎麼樣到處都是。有一件事對我來說很有幫助，我認爲，不要將「example」這個名稱用於你的定義和實例;當你的代碼的一半處理「示例」這個和「示例」時，它更令人困惑。在那裏獲得一些真實的條款 - 它會幫助你思考問題。 –

如果您從菜單項調用時檢查「this'是什麼對象，我認爲您會發現它是菜單項而不是您期望的對象。 – some

btw，數組適用於鍵是整數的情況。在這種情況下使用對象：'Example = {}'。（另外，即使你需要一個數組，你也應該使用'[]'而不是新的數組。 – hugomg

因爲this正在引用調用該方法的對象。

var MyObject= new function(){ 

    this.value="Hello World!"; 

    this.display=function(){ 
     alert(this.value); 
    } 
} 

<input type="button" value="Foo Bar!" onclick="MyObject.display()"> //Foo Bar!

這個例子會提醒「Foo Bar！」。而不是「Hello World！」

防止這種意外情況，你可以添加一個「檢查點」使用var that=this;

var MyObject= new function(){ 

    var that=this; // <--- reference to actual object 

    this.value="Hello World"; 

    this.display=function(){ 
     alert(that.value); 
    } 

} 

<input type="button" value="Foo Bar!" onclick="MyObject.display()"> //Hello World!

這將提醒的「Hello World！」來自MyObject的'值'而不是標籤的'值'。

。

也許這等情況下幫助您瞭解

<img scr="dog.gif" title="Little Dog" onclick="alert('This is a '+this.title)">

「這是一隻小狗」

來源

2011-11-08 20:51:30

更多小時後，我解決我的問題......不知怎麼的，我還沒有完全理解至今。

首先，最小的例子實際上起作用。我有奇怪的行爲，因爲我將示例代碼的行集成到應用程序代碼中。然而，代碼中的「深入」出現了與initialize（）調用發生衝突的錯誤。當我把示例代碼行的應用程序代碼之前，我總是得到輸出"Hello World"（在一種情況下，而不是"null World"）

其次，有應用程序中的根本缺陷。這是一個帶有側邊欄的Firefox擴展。與window.addEventListener(...)被調用兩次，一次爲側邊欄，一次爲「正常」的瀏覽器窗口。因此我有兩個獨立的window.obj。代碼僅爲側欄提供initialize()。在99％這不是問題，因爲大多數代碼使用側邊欄window.obj。然而，來自上下文菜單的調用以瀏覽器window.obj爲目標。作爲一種解決方案，我改變了代碼，只用了側邊欄window.obj。

對不起，找錯方向。儘管如此，非常感謝所有答案。您的評論帶回了正確的軌道，並確保我的動力！ :)

基督教

來源

2011-11-10 14:51:22 Christian

與'原型'混淆（Firefox擴展）

回答

相關問題