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

Question

我正在为 Firefox (3.6.*) 开发一个附加组件。在以下代码中，从 init 内部调用的 notify 工作正常，但在调用时出现错误，提示 this.notify 不是函数从 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的时间)。