this._waiting is undefined

Question

我想为web工作者编写一个简单的包装类。当其中一个定义的消息发送给webworker时，LayoutBridge会分配一个票据，该票据在处理请求时返回。这样，我应该可以为这些请求运行回调。

我收到以下错误

TypeError: this._waiting is undefined

在_recvMsg。

下面是代码，我一直试图解决这个自制谜语几天，但无法看到我做错了什么，因为等待在LayoutBridge构造函数和（只是以确保）在init函数中。

我会在此之后立即发布的jsfiddle，但也许有人知道答案了。

var LayoutBridge = function(){ 

    this._waiting = {}; 
    this._initialized = false; 

}; 

LayoutBridge.prototype.init = function(opts){ 
    if(!this._initialized){ 
     this._waiting = {}; 

     this._worker = new Worker('/layout-worker.js'); 
     this._worker.onmessage = this._recvMsg; 
     var ticket = _.uniqueId(); 

     var waitingCallback = function(){ 
      this._initiated = true; 
     }; 
     waitingCallback.bind(this); 
     this._waiting[ticket] = waitingCallback; 

     this._worker.postMessage({cmd: 'init', ticket: ticket}); 
     this._initialized = true; 
    } 
}; 

LayoutBridge.prototype.addVertex = function(callback){ 
    if(!this._initialized) throw "Initialize LayoutBridge first"; 

    var ticket = _.uniqueId(); 
    this._waiting[ticket] = callback; 
    this._worker.postMessage({cmd: 'addVertex', ticket: ticket}); 
}; 

LayoutBridge.prototype.removeVertex = function(id, callback){ 
    if(!this._initialized) throw "Initialize LayoutBridge first"; 

    var ticket = _.uniqueId(); 
    this._waiting[ticket] = callback; 
    this._worker.postMessage({cmd: 'removeVertex', id: id, ticket: ticket}); 
}; 

LayoutBridge.prototype.addEdge = function(sourceId, targetId, callback){ 
    if(!this._initialized) throw "Initialize LayoutBridge first"; 

    var ticket = _.uniqueId(); 
    this._waiting[ticket] = callback; 
    this._worker.postMessage({cmd: 'addEdge', sourceId: sourceId, targetId: targetId}); 
}; 

LayoutBridge.prototype._recvMsg = function(e){ 
    this._waiting[e.data.ticket](e.data.payload); 
    //delete this._waiting[e.data.ticket]; 
}; 

编辑，这里的小提琴：包括建议：http://jsfiddle.net/MGSvj/2/

Answer 1

分配你的函数到另一个阶级改变其范围。

这里你指定你的this._recvMsg功能Worker类。

this._worker.onmessage = this._recvMsg; 

因此，在这里的代码，这将是本机窗口对象或工人对象（也不太清楚这件事，但它绝对不会是LayoutBridge对象）。

LayoutBridge.prototype._recvMsg = function(e){ 
    this._waiting[e.data.ticket](e.data.payload); 
    //delete this._waiting[e.data.ticket]; 
}; 

为了解决这个问题，所有你需要做的是

var oThis = this; 
this._worker.onmessage = function(){ oThis._recvMsg }; 

而且，按照https://developer.mozilla.org/en/docs/DOM/Blob

斑点需要数组作为参数。

所以，你的代码

var blob = new Blob($('#layout-worker').html()); 

应该

var blob = new Blob([$('#layout-worker').html()]);