1.object.defineproperty()
const input = document.getElementById('input'); const p = document.getElementById('p'); var obj = {}; Object.defineProperty(obj, 'text', { get: function() { console.log('get val'); }, set: function(newVal) { document.getElementById('span').innerHTML = newVal; } }); const input = document.getElementById('input'); input.addEventListener('keyup', function(e){ obj.text = e.target.value; })2.proxy
const input = document.getElementById('input'); const p = document.getElementById('p'); const obj = {}; const newObj = new Proxy(obj, { get: function(target, key, receiver) { console.log(`getting ${key}!`); return Reflect.get(target, key, receiver); }, set: function(target, key, value, receiver) { console.log(target, key, value, receiver); if (key === 'text') { input.value = value; p.innerHTML = value; } return Reflect.set(target, key, value, receiver); }, }); input.addEventListener('keyup', function(e) { newObj.text = e.target.value; });proxy的优势： 1.Proxy可以直接监听对象而非属性 2.Proxy可以直接监听数组的变化 3.Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的。
