为什么要调用匿名函数,而命名函数不调用？

Question

我正在创建一个CoffeeScript应用程序,它使用canvas元素覆盖网络摄像头视频(这仅用于上下文,但似乎与我的问题无关).为了获得适当的画布大小覆盖在视频上,我将事件处理函数附加到loadedmetadata事件,如下所示:

WebcamWizard.prototype.initializeUserMedia = function(stream) {
  // ...
  video = document.getElementById('webcam');
  video.addEventListener('loadedmetadata', function(e) {
     // ...
     v = e.srcElement;
     // ...
  });
  // ...
}

这很好用.但是,我在这种情况下的偏好是在这个特定类的不同方法中定义这个处理程序方法,如下所示:

WebcamWizard.prototype.initializeUserMedia = function(stream) {
   // ...
   video = document.getElementById('webcam');
   video.addEventListener('loadedmetadata', this.initializeCanvas);
   // ...
}

WebcamWizard.prototype.initializeCanvas = function(e) {
   // ...
   video = e.srcElement;
   // ...
}

我更喜欢这个的原因是因为它使CoffeeScript看起来更整洁,并允许我更容易地访问我正在工作的类中的canvas DOM对象.然而,当我做第二个时,initializeCanvas似乎没有调用该方法.控制台上也没有报告错误.这是为什么？

奇怪的是,以这种方式调用方法似乎在同一文件中以完全相同的方式工作.

Answer 1

问题可能是"initializeCanvas" this在事件发生后调用它时将缺少一个有用的引用.您正在传递对该函数的引用,但this绑定是短暂的并且无法生存.

您可以将其包装在另一个函数中或使用.bind():

var wiz = this;
video.addEventListener('loadedmetadata', function() { wiz.initializeCanvas });