3

我正在创建一个 CoffeeScript 应用程序，它用画布元素覆盖网络摄像头视频（这只是为了上下文，但似乎与我的问题无关）。为了获得适当的画布大小以覆盖在视频上，我将事件处理函数附加到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 看起来更整洁，并允许我更轻松地访问我正在使用的类中的画布 DOM 对象。但是，当我执行第二个操作时，initializeCanvas似乎没有调用该方法。控制台上也没有报告错误。这是为什么？

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

4

1 回答 1

5

this问题可能是在事件发生后调用“initializeCanvas”时会缺少有用的参考。您正在传递对函数的引用，但this绑定是短暂的，将无法生存。

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

var wiz = this;
video.addEventListener('loadedmetadata', function() { wiz.initializeCanvas });
于 2012-07-09T14:35:53.497 回答