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

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

1 个答案: