Web Worker onmessage访问类变量报错的解决方法

错误原因 #

在myWorker.onmessage的传统function回调里，this的指向并非Queue类的实例，而是指向Worker对象本身，所以访问this.size时会得到undefined，进而触发报错。

三种解决方法 #

方法1：使用箭头函数 #

箭头函数不会绑定独立的this，会继承外层作用域的this（也就是Queue实例）：

sendChunk(chunkId) {
    if (window.Worker) {
        const myWorker = new Worker("/worker.js");
        myWorker.postMessage([chunkId]);
        // 改用箭头函数
        myWorker.onmessage = (e) => {
            console.log(e.data);
            console.log(this.size); // 现在能正确访问Queue实例的size
        }
    }
}

方法2：提前保存实例的this到变量 #

在回调外把Queue实例的this存到变量（比如that），回调里用这个变量访问：

sendChunk(chunkId) {
    if (window.Worker) {
        const myWorker = new Worker("/worker.js");
        const that = this; // 保存实例的this
        myWorker.postMessage([chunkId]);
        myWorker.onmessage = function(e) {
            console.log(e.data);
            console.log(that.size); // 用that访问实例的size
        }
    }
}

方法3：用bind绑定this #

通过bind方法把回调的this强制绑定到Queue实例：

sendChunk(chunkId) {
    if (window.Worker) {
        const myWorker = new Worker("/worker.js");
        myWorker.postMessage([chunkId]);
        myWorker.onmessage = function(e) {
            console.log(e.data);
            console.log(this.size);
        }.bind(this); // 绑定this到Queue实例
    }
}

额外提示 #

你的main.js里调用了q.startQueue()，但Queue类中并没有定义startQueue方法，这会导致新的报错，需要补充实现这个方法或者修改调用逻辑。

内容的提问来源于stack exchange，提问作者binggle