原型无法在Web Worker中使用

Question

简单地说，我正在尝试在Web Worker中构建函数原型，而Chrome抛出此错误：

Uncaught TypeError: Object #<DedicatedWorkerContext> has no method 'compute'

我认为需要一些示例代码。 这是我工作的最后一天，所以我很快就将这些内容汇总了。 整个下午一直在困扰我。 我希望它是我明天早上回来并说“啊哈”的那些问题之一，但是如果我没有机会，我想我也会在这里问。

page.js

function threaded() { 
   var thread = new Worker('worker.js');
   thread.postMessage({a: 1 b: 2});
   thread.onMessage = function (e) { 
     console.log(e.data)
   });
}
threaded();

worker.js

var foo = function(a,b) { 
   this.a = a
   this.b = b
   this.result = false;
   this.compute();
};

foo.prototype.compute = function() { 
   this.result = this.a * this.b;
};

onmessage = function(e) { 
   var msg = foo(e.data.a,e.data.b)
   postMessage(msg)
};

我还尝试了不同的提倡worker.js的方法，如下所示在onmessage中包含foo（），但收到以下错误：

Uncaught TypeError: Cannot set property 'a' of undefined

工人take2.js

onmessage = function(e) { 

   var foo = function(a,b) { 
      this.a = a
      this.b = b
      this.result = false;
      this.compute();
    };

   foo.prototype.compute = function() { 
     this.result = this.a * this.b;
   };

   var msg = foo(e.data.a,e.data.b)
   postMessage(msg)
};

Answer 1

问题是您正在执行foo ，而不是声明它的new实例。 因此，在foo上下文中， this值评估为专用工作程序上下文，而不是对象实例上下文。

试试看：

var foo = function(a,b) { 
   this.a = a
   this.b = b
};

foo.prototype.compute = function() { 
   return this.a * this.b;
};

onmessage = function(e) { 
   var msg = new foo(e.data.a,e.data.b).compute();
   postMessage(msg)
};

有一些重要的变化需要注意。 首先，我更改了compute以返回结果，而不是将其设置为属性。 请记住，在使用prototype您将显式创建在对象实例之间共享的方法，从而暗示您以面向对象的方式使用该代码。

其次，我更改了foo的构造函数，以便它不会立即调用compute 。 而是在声明对象实例之后调用compute 。

试试看！