使用Object.defineProperty监听一个数据的改变和获取

html结构

 <input type="text" id="input"  >
   <button id="btn"></button>
   <input type="button" id="zhikon">

let obj={
   name:'魏建新',
   age:25
}
定义一个对象
let zk=document.getElementById('zhikon')
获取置空按钮
let input=document.getElementById('input')
获取输入框
let btn=document.getElementById('btn')
获取获取按钮
btn.addEventListener('click',function(){
   console.log(obj.name);
})
点击按钮获取元素
zk.addEventListener('clicl',function(){
   obj.name=''
})
点击按钮置空
input.addEventListener('input',function(e){
   // let age=1
   obj.name=1
   obj.name = e.target.value
})
input事件
Object.defineProperty(obj,'name',{
get方法可以监听到元素的访问
   get:function(){
      console.log('get');
      return name
   },
   set可以监听到元素的更改
   set:function(newVlue){
      console.log('set');
      name=newVlue
   }
})