Q&A
下記はワーカーを利用した1~targetの範囲内でxの倍数がいくつあるかを調べるHTMLコードとJSコードです。1つ目のworker.jsの7行目のpostMessageメソッドについてです。postMessageは
other.postMessage(message, target)
・other:送信先ウィンドウ
・message:送信するメッセージ
・target:送信先
のように宣言するものだった思っていたのですが、1つ目のworker.jsの7行目ではいきなりpostMessageメソッドを宣言しています。そしてコードはしっかり動作します。
下記のコードではなぜ送信先ウィンドウを宣言せずにpostMessageメソッドが動作するのでしょうか。
何かわかる方がいらっしゃいましたらよろしくお願いします。
js
1//worker.js 2self.addEventListener('message', function(e) { 3 var count = 0; 4 for (var i = 1, len = e.data.target; i < len; i++) { 5 if (i % e.data.x === 0) { count++; } 6 } 7 postMessage(count);//←ここです。 8});
html
1<!-- worker_client.html --> 2<!DOCTYPE html> 3<html> 4 5<head> 6 <meta charset="UTF-8" /> 7 <title>JavaScript本格入門</title> 8</head> 9 10<body> 11 <form> 12 <input id="target" type="number" value="1000000" />以下： 13 <input id="x" type="number" value="7" />の倍数の個数＝ 14 <span id="result">－</span> 15 <input id="btn" type="button" value="計算" /> 16 </form> 17 <script src="scripts/worker_client.js"></script> 18</body> 19 20</html>
js
1//worker_client.js 2document.addEventListener('DOMContentLoaded', function () { 3 document.getElementById('btn').addEventListener('click', function () { 4 var worker = new Worker('scripts/worker.js'); 5 6 worker.postMessage({ 7 'target': document.getElementById('target').value, 8 'x': document.getElementById('x').value 9 }); 10 document.getElementById('result').textContent = '計算中...'; 11 12 worker.addEventListener('message', function (e) { 13 document.getElementById('result').textContent = e.data; 14 }, false); 15 worker.addEventListener('error', function (e) { 16 document.getElementById('result').textContent = e.message; 17 }, false); 18 }, false); 19}, false);
回答1件
0
ベストアンサー
workerはグローバルがwindowの代わりにDedicatedWorkerGlobalScopeオブジェクトとなり
postMessageがそのメソッドだからです。
そういう意味ではself.addEventListenerのselfも省略可能
投稿2020/08/20 12:50
総合スコア116835
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/20 12:51
2020/08/20 13:27
2020/08/21 00:05 編集
2020/08/21 01:54