原型在网络工作者中不起作用

Question

简单地说，我正在尝试在 web worker 中创建一个函数原型，而 chromium 抛出了这个错误：

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 以将 foo() 包含在 onmessage 中，如下所示，但收到以下错误：

Uncaught TypeError: Cannot set property 'a' of undefined

worker-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 实例。因此，this 在foo 的上下文中计算为专用的工作上下文，而不是对象实例上下文。

试试这个：

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 在声明对象实例后被调用。

试试看！