javascript - Firefox 附加组件 - `this` 在一种方法中有效，但在同一对象的另一种方法中失败

Question

我正在为 Firefox (3.6.*) 开发一个附加组件。在下面的代码中，从 init 内部调用的 notify 工作正常，但是当它被调用时我得到一个错误，说 this.notify is not a function从 onPageLoad 中。这是为什么？

此外，当我将调用更改为 myextobj.notify('title', 'msg') 时，它也有效。访问变量也是如此。那么，this和对象名作为前缀有什么区别呢？

var myextobj = {
  init: function() {
    this.notify('init', 'We are inside init');
    ...
    var appcontent = document.getElementById("appcontent");   // browser  
    if(appcontent)  
      appcontent.addEventListener("DOMContentLoaded", this.onPageLoad, true);
  },
  onPageLoad: function(aEvent) {
    this.notify('onPageLoad', 'We are inside onPageLoad');
    ...
  },

  notify: function (title, text) {  
    Components.classes['@mozilla.org/alerts-service;1'].  
      getService(Components.interfaces.nsIAlertsService).  
      showAlertNotification(null, title, text, false, '', null);  
  }  
};
window.addEventListener("load", function() { myextobj.init(); }, false);

Answer 1

当你这样做时:

appcontent.addEventListener("DOMContentLoaded", this.onPageLoad, true);

您只需添加保存在onPageLoad 中的函数作为事件处理程序。与对象的连接丢失，this 将在执行时引用全局对象。

只需像为 load 事件一样创建一个匿名函数:

var that = this; // capture reference to object
appcontent.addEventListener("DOMContentLoaded", function(event) {
    that.onPageLoad(event);
    // myextobj.onPageLoad(event); should also work in this case
}, true);

---

请记住，函数是 JavaScript 中的一流对象，它们可以像任何其他值一样传递。函数不引用它们定义的对象，因为它们不属于该对象。它们只是另一种数据。

this 在函数中引用哪个对象是在执行时决定的，取决于执行函数的上下文。如果调用 obj.func () 然后上下文是 obj，但是如果你在像 var a = obj.func 这样的之前将函数分配给另一个变量(这就是你做的添加事件处理程序(以某种方式))，然后调用 a()，this 将引用全局对象(最常见的是 window的时间)。