# ❓ 使用 JavaScript Proxy 实现简单的数据绑定

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Jeff9511</title>
  </head>
  <body>
    <span id="span"></span>
    <button id="button">change</button>

    <script>
      let span = document.getElementById('span')
      let button = document.getElementById('button')

      let test = {
        name: 'jeff',
      }

      let proxyTest = new Proxy(test, {
        get: function (target, propKey, receiver) {
          console.log(`getting ${propKey}!`)
          return Reflect.get(target, propKey, receiver)
        },
        set: function (target, propKey, value, receiver) {
          span.innerHTML = value
          return Reflect.set(target, propKey, value, receiver)
        },
      })

      button.addEventListener(
        'click',
        function () {
          proxyTest.name += ' hello'
        },
        false
      )
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40