handleEvent
handleEvent
を持つオブジェクトを指定してみては、どうでしょう。
Living Standard](https://dom.spec.whatwg.org/#interface-eventtarget)
JavaScript
1Foo.prototype = {
2 bar: function bar () {
3 document.addEventListener('click'. this, false);
4 },
5 piyo: piyo,
6 handleEvent: function handleEvent (event) {
7 this.piyo();
8 }
9};
Function.prototype.bind
JavaScript
1Foo.prototype.bar = function bar () {
2 document.addEventListener('click'. function handleClick (event) { this.method(); }.bind(this), false);
3};
アロー関数
JavaScript
1Foo.prototype.bar = function bar () {
2 document.addEventListener('click', (event) = > this.method(), false);
3};
プライベートプロパティを定義する
ECMAScript® 2017 (ES8) にはプライベートプロパティを作る方法が用意されていない為、WeakMap
を利用します。
下記コードは、上記リンク先の createPivateMap()
を利用したコードです。
JavaScript
1const Clicker = (() => {
2 var pm = createPivateMap();
3
4 return class Clicker {
5 constructor (message) {
6 pm(this, {message: message});
7 }
8 addListener () {
9 pm(this).listener = (event) => console.log(event.type, pm(this).message);
10 document.addEventListener('click', pm(this).listener, false);
11 }
12 removeListener () {
13 document.removeEventListener('click', pm(this).listener, false);
14 }
15 };
16})();
17
18const c1 = new Clicker('Hello, World!'),
19 c2 = new Clicker('Hello, JavaScript!');
20
21c1.addListener();
22c2.addListener();
23document.documentElement.click();
24c1.removeListener();
25c2.removeListener();
26document.documentElement.click();
listenerを共通化したい
理由は公開したくないのと、リスナをインスタンスごとに持たせるのがムダに思うからです(可能なら共通のものにしたい)。
無駄ではないと思います。
listenerを共通参照にするというのは、[JavaScript] プライベートプロパティを作る方法.mdのStatic版のコードにするという事です。
インスタンス毎に独立した処理に出来ず、removeEventListener
は全てのインスタンスに影響してしまいます。
イベント周りの都合を踏まえると、listenerは各々、別の参照であるべきと考えます。
(2018/04/15 13:55追記)
最終的にどうなっている状態かがわかりづらいため全体のコードを追記します。
関数 listener
の生成コストを無くしたい意図で書いたコードとお見受けしました。
前述のコードでは、コードの平易さ重視で関数をネストしましたが、私も自分でコードを書くときには関数を外出しするので気持ちは分かります。
(おそらく、「listener共通化」の本来の目的も生成コストにあるのではないでしょうか)
さて、実際に listener を共通化してみると問題点がはっきりします。
JavaScript
1class X {
2 addListener () {
3 window.addEventListener("click", listener, false)
4 }
5 removeListener () {
6 window.removeEventListener("click", listener, false)
7 }
8}
9
10function listener (event) {
11 console.log(event.type);
12}
13
14const x1 = new X(),
15 x2 = new X();
16
17x1.addListener(); // x1 で listener 追加
18x2.addListener(); // x2 で listener 追加(上書き)
19document.body.click(); // コンソールには "click" が「1回だけ」出力される
20x2.removeListener(); // 上書きされた listener 一つを削除
21document.body.click(); // x1, x2 共に click イベントハンドラが発動しない
内部的には以下のコードが実行されています。
JavaScript
1window.addEventListener("click", listener, false); // x1 で listener 追加
2window.addEventListener("click", listener, false); // x2 で listener 追加 (listener が x1 と同一なので、上書き処理)
3document.body.click(); // listener は一つしか追加されなかったので、コンソールには "click" が「1回だけ」出力される
4window.removeEventListener("click", listener, false); // x2 で listener 削除 (listener は1つしか登録されてないので全削除)
5document.body.click(); // 何も起きない
addEventListener
から見れば、同じ listener
を与えれば同じイベントハンドラと認識します。
従って、listener
を共通化出来ないのです。
まとめ
最終的に質問文に追記されたコードを元に今までのロジックを詰め込むと、下記コードになります。
JavaScript
1const wmap = new WeakMap();
2
3class X {
4 addListener () {
5 const listener = templateListener.bind(this);
6
7 wmap.set(this, listener);
8 window.addEventListener("click", listener, false);
9 }
10 removeListener(){
11 window.removeEventListener("click", wmap.get(this), false);
12 }
13}
14
15function templateListener (event) {
16 this.prop = event.target;
17 console.log(this);
18}
19
20const x1 = new X(),
21 x2 = new X();
22
23x1.addListener();
24x2.addListener();
25document.body.click(); // 2回発火
26document.documentElement.click(); // 2回発火
27x2.removeListener();
28document.body.click(); // 1回発火
listener に任意の引数を指定したい場合は Function.prototype.bind
の第二引数以降を利用するか、handleEvent
プロパティ付のオブジェクトを渡して、プロパティ経由で取得します。
JavaScript
1const wmap = new WeakMap()
2
3class X {
4 addListener () {
5 const listener = createListener(this, templateListener);
6
7 wmap.set(this, listener);
8 window.addEventListener("click", listener, false);
9 }
10 removeListener(){
11 window.removeEventListener("click", wmap.get(this), false);
12 }
13}
14
15function createListener (thisArg, handleEvent) {
16 return Object.assign(Object.create(Object.getPrototypeOf(thisArg)), thisArg, {handleEvent: handleEvent, thisArg: thisArg});
17}
18
19function templateListener (event) {
20 this.thisArg.prop = event.target
21 console.log(this);
22}
23
24const x1 = new X(),
25 x2 = new X();
26
27x1.addListener();
28x2.addListener();
29document.body.click(); // 2回発火
30document.documentElement.click(); // 2回発火
31x2.removeListener();
32document.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/12 16:01
2018/04/13 01:40
2018/04/13 03:28
2018/04/14 00:27
2018/04/14 01:08
2018/04/14 01:29 編集
2018/04/14 01:38
2018/04/14 02:01
2018/04/14 08:15
2018/04/14 09:03
2018/04/14 09:17
2018/04/14 09:39 編集
2018/04/14 09:41
2018/04/15 03:09
2018/04/15 05:03
2018/04/15 05:13
2018/04/15 07:24