編集履歴

回答編集履歴

typo修正

2018/04/15 04:57

投稿

スコア18164

test CHANGED Viewed

@@ -412,7 +412,7 @@
-それから、このコードは簡易版なので、enumerable` 等の descriptor まではコピーしません。 `Object.getOwnPropertyDescriptor` を併用する事で、本来の `this` 値と同じ挙動となります。
+それから、このコードは簡易版なので、`enumerable` 等の descriptor まではコピーしません。 `Object.getOwnPropertyDescriptor` を併用する事で、本来の `this` 値と同じ挙動となります。

listenerを共通化したい、まとめ節を追記

2018/04/15 04:57

投稿

think49

スコア18164

test CHANGED Viewed

@@ -148,6 +148,12 @@
+### listenerを共通化したい
 > 理由は公開したくないのと、リスナをインスタンスごとに持たせるのがムダに思うからです（可能なら共通のものにしたい）。
@@ -162,4 +168,252 @@
+**(2018/04/15 13:55追記)**
+> 最終的にどうなっている状態かがわかりづらいため全体のコードを追記します。
+関数 `listener` の生成コストを無くしたい意図で書いたコードとお見受けしました。
+前述のコードでは、コードの平易さ重視で関数をネストしましたが、私も自分でコードを書くときには関数を外出しするので気持ちは分かります。
+(おそらく、「listener共通化」の本来の目的も生成コストにあるのではないでしょうか)
+さて、実際に listener を共通化してみると問題点がはっきりします。
+```JavaScript
+class X {
+  addListener () {
+    window.addEventListener("click", listener, false)
+  }
+  removeListener () {
+    window.removeEventListener("click", listener, false)
+  }
+}
+function listener (event) {
+  console.log(event.type);
+}
+const x1 = new X(),
+      x2 = new X();
+x1.addListener();       // x1 で listener 追加
+x2.addListener();       // x2 で listener 追加(上書き)
+document.body.click();  // コンソールには "click" が「1回だけ」出力される
+x2.removeListener();    // 上書きされた listener 一つを削除
+document.body.click();  // x1, x2 共に click イベントハンドラが発動しない
+```
+内部的には以下のコードが実行されています。
+```JavaScript
+window.addEventListener("click", listener, false);		// x1 で listener 追加
+window.addEventListener("click", listener, false);		// x2 で listener 追加 (listener が x1 と同一なので、上書き処理)
+document.body.click(); 												      // listener は一つしか追加されなかったので、コンソールには "click" が「1回だけ」出力される
+window.removeEventListener("click", listener, false);	// x2 で listener 削除 (listener は1つしか登録されてないので全削除)
+document.body.click(); 												      // 何も起きない
+```
+`addEventListener` から見れば、同じ `listener` を与えれば同じイベントハンドラと認識します。
+従って、`listener` を共通化出来ないのです。
+### まとめ
+最終的に質問文に追記されたコードを元に今までのロジックを詰め込むと、下記コードになります。
+```JavaScript
+const wmap = new WeakMap();
+class X {
+  addListener () {
+    const listener = templateListener.bind(this);
+    wmap.set(this, listener);
+    window.addEventListener("click", listener, false);
+  }
+  removeListener(){
+    window.removeEventListener("click", wmap.get(this), false);
+  }
+}
+function templateListener (event) {
+  this.prop = event.target;
+  console.log(this);
+}
+const x1 = new X(),
+      x2 = new X();
+x1.addListener();
+x2.addListener();
+document.body.click();             // 2回発火
+document.documentElement.click();  // 2回発火
+x2.removeListener();
+document.body.click();             // 1回発火
+```
+listener に任意の引数を指定したい場合は `Function.prototype.bind` の第二引数以降を利用するか、`handleEvent` プロパティ付のオブジェクトを渡して、プロパティ経由で取得します。
+```JavaScript
+const wmap = new WeakMap()
+class X {
+  addListener () {
+    const listener = createListener(this, templateListener);
+    wmap.set(this, listener);
+    window.addEventListener("click", listener, false);
+  }
+  removeListener(){
+    window.removeEventListener("click", wmap.get(this), false);
+  }
+}
+function createListener (thisArg, handleEvent) {
+  return Object.assign(Object.create(Object.getPrototypeOf(thisArg)), thisArg, {handleEvent: handleEvent, thisArg: thisArg});
+}
+function templateListener (event) {
+  this.thisArg.prop = event.target
+  console.log(this);
+}
+const x1 = new X(),
+      x2 = new X();
+x1.addListener();
+x2.addListener();
+document.body.click();             // 2回発火
+document.documentElement.click();  // 2回発火
+x2.removeListener();
+document.body.click();             // 1回発火
+```
+渡している `this` 値は `new X` とほぼ同一ですが、`this.prop = event.target` のようにインスタンスにプロパティ拡張する場合には参照値が異なるので、`this.thisArg` 経由で渡してやります。
+プロパティ拡張を `listener` 内でやらなければ、`this.adddListener`でメソッドは呼べますし、メソッド経由でプロパティ拡張をすれば、`thisArg` プロパティは不要ですが、設計思想の違いが現われるところですね。
+それから、このコードは簡易版なので、enumerable` 等の descriptor まではコピーしません。 `Object.getOwnPropertyDescriptor` を併用する事で、本来の `this` 値と同じ挙動となります。
 Re: lazex さん

プライベートプロパティを定義する

2018/04/15 04:56

投稿

think49

スコア18164

test CHANGED Viewed

@@ -74,4 +74,92 @@
+### プライベートプロパティを定義する
+ECMAScript® 2017 (ES8) にはプライベートプロパティを作る方法が用意されていない為、`WeakMap` を利用します。
+- [[JavaScript] プライベートプロパティを作る方法.md](https://gist.github.com/think49/66c8a8a6589ec3aacc1689ee7d7fddb6)
+下記コードは、上記リンク先の `createPivateMap()` を利用したコードです。
+```JavaScript
+const Clicker = (() => {
+  var pm = createPivateMap();
+  return class Clicker {
+    constructor (message) {
+      pm(this, {message: message});
+    }
+    addListener () {
+      pm(this).listener = (event) => console.log(event.type, pm(this).message);
+      document.addEventListener('click', pm(this).listener, false);
+    }
+    removeListener () {
+      document.removeEventListener('click', pm(this).listener, false);
+    }
+  };
+})();
+const c1 = new Clicker('Hello, World!'),
+      c2 = new Clicker('Hello, JavaScript!');
+c1.addListener();
+c2.addListener();
+document.documentElement.click();
+c1.removeListener();
+c2.removeListener();
+document.documentElement.click();
+```
+> 理由は公開したくないのと、リスナをインスタンスごとに持たせるのがムダに思うからです（可能なら共通のものにしたい）。
+無駄ではないと思います。
+listenerを共通参照にするというのは、[[JavaScript] プライベートプロパティを作る方法.md](https://gist.github.com/think49/66c8a8a6589ec3aacc1689ee7d7fddb6)のStatic版のコードにするという事です。
+インスタンス毎に独立した処理に出来ず、`removeEventListener` は全てのインスタンスに影響してしまいます。
+イベント周りの都合を踏まえると、listenerは各々、別の参照であるべきと考えます。
 Re: lazex さん

typo

2018/04/14 08:10

投稿

think49

スコア18164

test CHANGED Viewed

@@ -22,13 +22,13 @@
 Foo.prototype = {
-  bar: function bar () {
+    bar: function bar () {
     document.addEventListener('click'. this, false);
   },
-    piyo: piyo
+    piyo: piyo,
     handleEvent: function handleEvent (event) {

bind, アロー関数

2018/04/13 03:47

投稿

think49

スコア18164

test CHANGED Viewed

@@ -1,3 +1,7 @@
+### handleEvent
 `handleEvent` を持つオブジェクトを指定してみては、どうでしょう。
@@ -11,3 +15,63 @@
 - [2.6. Interface EventTarget - DOM
 Living Standard](https://dom.spec.whatwg.org/#interface-eventtarget)
+```JavaScript
+Foo.prototype = {
+  bar: function bar () {
+    document.addEventListener('click'. this, false);
+  },
+    piyo: piyo
+    handleEvent: function handleEvent (event) {
+      this.piyo();
+    }
+};
+```
+### Function.prototype.bind
+```JavaScript
+Foo.prototype.bar = function bar () {
+  document.addEventListener('click'. function handleClick (event) { this.method(); }.bind(this), false);
+};
+```
+### アロー関数
+```JavaScript
+Foo.prototype.bar = function bar () {
+  document.addEventListener('click', (event) = > this.method(), false);
+};
+```
+Re: lazex さん

Qiita

2018/04/13 03:46

投稿

think49

スコア18164

test CHANGED Viewed

@@ -4,6 +4,8 @@
 - [JavaScript - javascriptのプログラム構造について(24798)｜teratail](https://teratail.com/questions/24798)
+- [addEventListenerで関数に引数を渡す - Qiita](https://qiita.com/rukiadia/items/03aaa8955c0f6576a5e7)
 - [EventTarget.addEventListener() - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)
 - [2.6. Interface EventTarget - DOM