すべてのプロパティでセッターが呼ばれたときに処理を追加したい

Question

すべてのプロパティでセッターが呼ばれたときに処理を追加したい

すべてのプロパティでセッターが呼ばれたときに処理を追加したいのですが、addEventListenerを経由するとうまくいきません。

const Target = class {
  constructor(element) {
    this._element = element
    element.addEventListener('focus', this)
    element.addEventListener('blur', this)
  }
  get element() {
    return this._element
  }
  get active() {
    return !!this._active
  }
  set active(bool) {
    this._active = bool
  }
  handleEvent({ type }) {
    console.log(type + ' before', this.active)
    this.active = type === 'focus'
    console.log(type + ' after', this.active)
  }
}

const handler = {
  get(target, key) {
    return target[ key ]
  },
  set(target, key, value) {
    console.log('YES!', { target, key, value }) //何らかの処理
    target[ key ] = value
    return true
  }
}

const element = document.body.appendChild(document.createElement('textarea'))

const proxiedTarget = new Proxy(new Target(element), handler)

proxiedTarget.active = !proxiedTarget.active //OK

proxiedTarget.active = !proxiedTarget.active //OK

proxiedTarget.handleEvent({ type: 'focus' }) //OK //addEventListener用ですが確認のため直接実行

//クリック等で要素をフォーカス・ブラーさせてaddEventListener経由でhandleEventが実行されるとhandler.setが反応しない＞＜

上記の例ではプロパティは「active」一つだけですが実際は（継承元も含めて）たくさんあるのでProxyで一括処理できないかなと思いました。

が、handleEventメソッドを直接呼ぶ場合はメソッド内の「this.active = type === 'focus'」に反応して期待通りにhandlerの処理が行われるのですが、
addEventListener経由で呼ばれる場合はProxyにラップされていないのかhandlerの処理が行われません。
addEventListener経由でもトラップするにはどうすればいいですか？

あと、

const proxiedTarget = new Proxy(new Target(element), handler)

ではなく

const ProxiedTarget = new Proxy(Target, handler)
const proxiedTarget = new ProxiedTarget(element)

みたいにできますか？（Proxyのターゲットとしてインスタンスじゃなくクラスを渡しても実現可能ですか？）

やりたいことがもっと短いコードでかんたんに実現できるならProxyじゃなくても何でもいいです。

Comments

[think49]

想像力を要求される質問な気がしますが、

Q1. _acitveのような _ で始まるプロパティはプライベートプロパティの代替ですか
Q2. focus,blurイベントハンドラで _active プロパティの真偽値が反転するように、mouseover/mouseoutなどの対応するイベントハンドラ同士でトグル処理するのが目的ですか

[_._]

サンプルのコードを削りすぎていますか？すみません。
A1. はいそんなかんじです。じっさいは「handler.set()」内で「if (key[ 0 ] !== '_')」等として選別します。
A2. focusとblurの値の反転以外は、ほかにはkeydownでキーコードを記録したり（厳密には違いますが）mousemoveで座標（とかドラッグ中かどうか等）を記録したりです。

Proxyにはぜんぜんこだわっていません。ほかに思いつかなかっただけでどんな方法でもいいです。よろしくおねがいします。

[think49]

> 上記の例ではプロパティは「active」一つだけですが実際は（継承元も含めて）たくさんあるのでProxyで一括処理できないかなと思いました。

イベントタイプに対応するデータ(key/value)が多量にあるという意味なら、new Proxyを使用すれば、addEventListener処理は楽になりますが、イベント発火時に多量のデータを検索するコストを払うことになり、コストを先に払うか、後に払うかだけの違いになっている気がします。
結局、new Proxy版とそうでない版を作って、パフォーマンスを比較してみる以外にないのではないでしょうか。

[_._]

大量にあるのはクラスのプロパティで、
（書き込みもできる（getだけじゃなくsetもできる）プロパティは親クラスからの継承も含めて今のところ10数個）
これらのプロパティすべての書き込みを監視したいのですが、この書き込みもできるプロパティの一部が、
外部からだけじゃなくaddEventListener経由で内部からも変更される仕組みで、このaddEventListener経由のばあいだけがうまくいかなかったので
方向としてはProxyが正解であとはaddEventListenerの箇所だけうまくやれば・・・と思ってました。
Proxyは処理が重くなるんですか。

[think49]

10数個程度なら、プロパティを列挙して初期化するだけで良いのでは…。
それほど多いとは思いません。

[_._]

どうもありがとうございます。その方向で進めたいと思います。

Answer 1

要件

鍵となる動作は

• 特定のイベントが発火時、特定のkey/value形式のデータを書き込む

これだけだと思います。
new Proxy を使用することで一部の動作を後回しに出来ますが、結局は上記紐付けデータをどこかに保存しておかなければなりません。
紐付けは new Array もしくは new Map をを使用すれば問題ないように思います。

コード

gistにコードを、Plunkerにデモを置きました。

• fired-event.js - GitHub gist
• Plunker - fired-event.jsのデモ

Re: . さん

Comments

[_._]

もしかしたらまた説明不足になってしまってますか・・・すみません。
active等の各種プロパティは外部からも変更できる状態にしたいです。
各種プロパティの外部からの変更に反応しつつ、addEventListener経由の内部からの変更にも対応したいのですがその部分でうまくいかないのが現状です。

[think49]

「そのぐらいは自分で対応して下さい」といいたいところですが、大した手間ではなかったので更新しました(v1.0.1)。

※自分で調べた形跡もなく、「要望だけを伝える」のは基本的に作業依頼と見なしています。
getterをご存知であれば、読み取り専用にする方法はご自身で思いつきそうな気がしますが、全く見当が付かなかったのでしょうか。

[think49]

あれ…、「書き換え可能」ですか？
v1.0.0は書き換え可能だったはずですが…。

[_._]

すみません。おもいのほか複雑だったのでコードを読み切れていないまま
意図が伝わっていないのではと思いはやく返信しないとと焦ってコメントしてしまいました。
ここまで入り組んだ問題なんですね。数コード追加で実現するようなもっと単純な話かと思っていました。
デモコード1.0.1ありがとうございます。
自分がわかるかんたんなクラスの仕組みとはちがうのでまだ理解が追いついていません。

[_._]

入れ違いすみません。コードの内容を理解しないまま慌てて返信しています。本当にすみません。

[think49]

第三引数で「writable: true/false」を指定できるようにしました。 -> fired-event-1.0.2.js

[AkitoshiManabe]

> 自分がわかるかんたんなクラスの仕組みとはちがうので
普通はメタプログラミングせずに事足りる事例が多いので、JavaScriptの抽象化を熟知していないとProxyの活用は難しいかもしれません。
Proxyの取っ掛かりとしては 「MDN メタプログラミング」もあります。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Meta_programming
RE: _._ さん

[think49]

ESに存在しないprivate propertyをWeakMapで代替する方法を使っていますので、そこが珍しく感じられるのかもしれません。
https://gist.github.com/think49/66c8a8a6589ec3aacc1689ee7d7fddb6
https://gist.github.com/think49/31a2cedb5c653fd18086ade669c04323

[think49]

後で気になった点。
new Fooのプロパティ(key/value)をnew FiredEventに持ってくるには、次のように書きますが、

const foo = new Foo;
const fe = new FiredEvent(element, new Map([['focus', Object.entries(foo)]]));

一方で書き換えた値がもう一方に反映されるわけではありません。

foo.bar = 'replaced';
console.log(foo.bar === fe.data.get('bar')); false

両者の同期をとる動作を必要としている場合、どちらかにgetter/setter(or Proxy)を設けて、両値を書き換えてやる必要があります。

[_._]

> ESに存在しないprivate propertyをWeakMapで代替する方法を使っていますので、そこが珍しく感じられるのかもしれません。
class Foo {
#private
constructor() {}
}
みたいなのをbabelに通したらWeekMapを使ったコードになりました。
なんとなくですがやっていることがわかりました。ありがとうございます。

Answer 2

すみません。これでいけている気がします。

（本題ではありませんが誤解を生んでいた擬似的なプライベートフィールドも書き直しました。）

const Target = class {
  #element
  #active
  constructor(element) {
    this.#element = element
    element.addEventListener('focus', this)
    element.addEventListener('blur', this)
  }
  get element() {
    return this.#element
  }
  get active() {
    return !!this.#active
  }
  set active(bool) {
    this.#active = bool
  }
  handleEvent({ type }) {
    console.log(type + ' before', this.active)
    this.active = type === 'focus'
    console.log(type + ' after', this.active)
  }
}

const handler = {
  get(target, key, receiver) {
    return target[ key ]
  },
  set(target, key, value, receiver) {
    console.log('YES!', { target, key, value, receiver }) //何らかの処理
    target[ key ] = value
    return true
  }
}

const element = document.body.appendChild(document.createElement('textarea'))

const target = new Target(element)
const proxiedTarget = new Proxy(target, handler)
target.handleEvent = target.handleEvent.bind(proxiedTarget) //追加！

proxiedTarget.active = !proxiedTarget.active

proxiedTarget.active = !proxiedTarget.active

proxiedTarget.handleEvent({ type: 'focus' })