通过Object.defineProperty对数据的 获取 和 修改 进行劫持。

    1. <body>
    2.   <input type="text" id="userName"/>
    3.   <h2 id="getName"></h2>
    4. </body>
    6. <script>
    7.     let obj = {};
    8.     Object.defineProperty(obj,'name',{
    9.       get:function(){
    10.         console.log('name获取');
    11.         return obj.name;
    12.       },
    13.       set:function(val){
    14.         console.log('name改变');
    15.         document.querySelector('#getName').innerText = val
    16.       }
    17.     })
    19.     //添加一个input事件
    20.     document.querySelector('#userName').addEventListener('input',function(){
    21.       obj.name = event.target.value;
    22.     })
    23. </script>