回答編集履歴

追記が蛇足だったので取り消し

2020/10/16 10:29

投稿

スコア34

test CHANGED Viewed

@@ -101,127 +101,3 @@
 proxiedTarget.handleEvent({ type: 'focus' })
 ```
----
-追記（汎用化？）
-```javascript
-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 proxied = target => class extends target {
-  constructor(...arg) {
-    super(...arg)
-    const proxiedTarget = new Proxy(this, handler)
-    typeof this.handleEvent === 'function' && (this.handleEvent = this.handleEvent.bind(proxiedTarget))
-    return proxiedTarget
-  }
-}
-const ProxiedTarget = proxied(Target)
-const element = document.body.appendChild(document.createElement('textarea'))
-const proxiedTarget = new ProxiedTarget(element)
-proxiedTarget.active = !proxiedTarget.active
-proxiedTarget.active = !proxiedTarget.active
-proxiedTarget.handleEvent({ type: 'focus' })
-```

コードの追加

2020/10/16 10:29

投稿

スコア34

test CHANGED Viewed

@@ -101,3 +101,127 @@
 proxiedTarget.handleEvent({ type: 'focus' })
 ```
+---
+追記（汎用化？）
+```javascript
+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 proxied = target => class extends target {
+  constructor(...arg) {
+    super(...arg)
+    const proxiedTarget = new Proxy(this, handler)
+    typeof this.handleEvent === 'function' && (this.handleEvent = this.handleEvent.bind(proxiedTarget))
+    return proxiedTarget
+  }
+}
+const ProxiedTarget = proxied(Target)
+const element = document.body.appendChild(document.createElement('textarea'))
+const proxiedTarget = new ProxiedTarget(element)
+proxiedTarget.active = !proxiedTarget.active
+proxiedTarget.active = !proxiedTarget.active
+proxiedTarget.handleEvent({ type: 'focus' })
+```