与'prototype'混淆(Firefox扩展)

Question

我正在开发一个firefox扩展,我想我现在已经对Javascript产生了一个基本的误解,确切地说是'原型'概念.考虑以下最小的例子,注意我设置变量this.demo和this.test时的差异:

  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
  );

打开Firefox时,我得到了预期的输出:

  Hello World

只要在js源文件中调用display()',就可以这样工作.但是,当我通过菜单条目中的相应点击调用display()时,例如:

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

我明白了:

  null World

当然,之前已经调用了initialize().

我仍然是Javascript的新手并使用现有代码.因此,我对目前的行为感到困惑.什么是最好的解决方案是工作？

Answer 1

因为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!” 而不是“你好世界！”

为了防止这种意外情况，您可以使用添加“检查点”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)">

“这是一只小狗”