有没有办法在webworker中加载一个类而不仅仅是普通的javascript文件？

Question

I want to load a file in webworker but its not a plain javascript file. It is a class. So, instead of writing javascript file url in new Worker(filename.js);

I am initializing the class by writing new Worker(new ClassName());

It is reading the file and loading it properly. It even shows the console.log message in constructor. But when the control moves to postMessage method in main file, it throws error.

The application I am working on has a very complex structure. We have a common module that contains several classes which are executing some common functionalities throughout the application. The functionality I am working on can cause the performance issues if I execute it directly in the application. So, I am loading it in a webworker. Since its a class so I have to invoke it using new keyword. So instead of:

var ww = new Worker(filename.js);

I am writing:

var ww = new Worker(new ClassName());

Now, it invokes the class, it console logs the statement written in constructor but when in the main file it executes postMessage, javascript throws an error and stops the method from execution.

See the code below:

mainFile.js

    var ww = new Worker(new CommonWebWorker());
        ww.postMessage('LOAD');
        ww.onmessage = function (e) {
            console.log(e.data);
    }

CommonWebWorker.js

'use strict';

class CommonWebWorker {
    constructor() {
        console.log("commonWebWorker invoked");
        this.onmessage = function (e) {
            this.postMessage((e.data === 'LOAD' ? 'Loading...' : 'Loading Error'));
        }
    }
}

module.exports = CommonWebWorker;

I expect that the file will load in the background through WebWorker but actually it is breaking and throwing below mentioned error

GET http://localhost:3000/[object%20Object] 404 (Not Found)

Any kind of help is much appreciated.

Answer 1

The reason for the error is that Worker expects a URL string as its first parameter, not an object. So it converts it to a string, and when you do that on most objects you get "[object Object]" (although I would have expected "[object CommonWebWorker]" from your code, but I assume you're using a transpiler or something outputting ES5 code, which would give you "[object Object]" instead).

Your main page and your work are completely different JavaScript environments. You can certainly use a class in your worker if you want, but you'd need to instantiate it in the worker, eg:

class CommonWebWorker {
 // ...
}
new CommonWebWorker(); // To instantiate it

Your worker can also import the class from another JavaScript file via importScripts (before too long it'll be able to use ES2015+ module syntax instead), so if you want to use the same class in multiple workers, you could put it in its own file and do:

importScripts("common-web-worker.js");
new CommonWebWorker(); // To instantiate it

Once ES2015+ syntax is widely available in workers¹, you'd start your worker with the relevant module flag ( new Worker("worker.js", {type: "module"}) ), and do this instead:

import CommonWebWorker from "./common-web-worker.js";
new CommonWebWorker();

---

¹ I checked just a month ago or so, and the only browser supporting it was Chrome behind a --enable-experimental-web-platform-features flag. But this stuff changes fast... :-)