为什么我在定义对象时不能在（JavaScript）Worker 中使用它？

发布于 2024-12-21 14:17:12 字数 1391 浏览 3 评论 0原文

来自 Java (OOP) 世界，我习惯了类、继承和多线程。现在，对于我在 JavaScript 领域的简短介绍，我尝试在适用的情况下利用这些范式和模式。阅读：使用原型（“类”/对象）和 WebWorkers 进行并行执行。但是，这种情况不起作用...

HTML 站点启动一个工作程序：

<html>
    <head>
        <script>
        var worker = new Worker("worker.js");
        worker.onmessage(event) {
            // here be fancy script
        }
        worker.postMessage("run, worker, run!"); 
        </script>
    </head>
    ...
</html>

由 HTML 调用的工作程序（“worker.js”）：

self.loadScripts("handler.js");
var handler = null;
self.onmessage = function(event) {
    if(!handler) {
        handler = new Handler();
    }

    handler.compute();
}

由工作程序调用的处理程序（“handler.js”）：

function Handler() {
}

Handler.prototype = {
    compute: function() {
        this.doSomething(); // <-- ERROR! "this" points to the worker context,
                            // not to the Handler instance. So "doSomething" is
                            // undefined. However, the following line would work:
        // Handler.prototype.doSomething();
    },
    doSomething: function() {
        // More code here
    }
}

是 JavaScript 原型和“继承 ” “打算这样工作吗？我应该始终使用原型属性而不是这个吗？如果我想访问 this.myProperty 而不是函数怎么办？

另外：是否有任何合理的方法可以将其绑定到构造函数中的 Handler 实例？至少代码没有因冗长的 Handler.prototype 引用而变得混乱。

谢谢！

原文

Coming from the Java (OOP) world, I am used to classes, inheritance and multi threading. Now for my little walkabout in the JavaScript domain, I try to utilize these paradigms and patterns where applicable. Read: use prototypes ("classes" / objects) and WebWorkers for parallel execution. However, this one case does not work ...

HTML site starting a worker:

<html>
    <head>
        <script>
        var worker = new Worker("worker.js");
        worker.onmessage(event) {
            // here be fancy script
        }
        worker.postMessage("run, worker, run!"); 
        </script>
    </head>
    ...
</html>

Worker called by HTML ("worker.js"):

self.loadScripts("handler.js");
var handler = null;
self.onmessage = function(event) {
    if(!handler) {
        handler = new Handler();
    }

    handler.compute();
}

The Handler as called by the worker ("handler.js"):

function Handler() {
}

Handler.prototype = {
    compute: function() {
        this.doSomething(); // <-- ERROR! "this" points to the worker context,
                            // not to the Handler instance. So "doSomething" is
                            // undefined. However, the following line would work:
        // Handler.prototype.doSomething();
    },
    doSomething: function() {
        // More code here
    }
}

Is JavaScript prototyping and "inheritance" meant to work this way? Should I always use the prototype property instead of this? What if I want to access this.myProperty instead of a function?

Also: is there any reasonable way to bind this to the Handler instance in the constructor? At least the code is not cluttered with lengthy Handler.prototype references.

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

习惯成性 2024-12-28 14:17:13

感谢您的评论。事实上，这一切的背景都符合预期。真正的代码使用了超时回调：

Handler.prototype = {
    compute: function() {
        self.setTimeout(this.doSomething, 1000); // Here the this got lost
    },
    doSomething: function() {
        // Code here
    }
}

看来超时调用正在引用工作线程上下文。为了解决这个问题，我只是将回调包装在一个匿名函数中（将调用者引用为变量，正如 jfriend00 建议的那样）：

Handler.prototype = {
    compute: function() {
        var caller = this;
        self.setTimeout(function() { // Wrap for great justice
            caller.doSomething();
            } , 1000);
    }, doSomething: function() {
        // Code here
    }
}

再次感谢。

Thank you for your comments. Indeed, the context of this works as expected. The real code used a timeout callback:

Handler.prototype = {
    compute: function() {
        self.setTimeout(this.doSomething, 1000); // Here the this got lost
    },
    doSomething: function() {
        // Code here
    }
}

It seems this from a timeout call is referencing the worker context. To solve the issue, I just wrapped the callback in an anonymous function (referencing the caller as a variable, as jfriend00 suggested):

Handler.prototype = {
    compute: function() {
        var caller = this;
        self.setTimeout(function() { // Wrap for great justice
            caller.doSomething();
            } , 1000);
    }, doSomething: function() {
        // Code here
    }
}

Thanks again.

回复收藏 0 原文

~没有更多了~