Object.defineProperty 和ES6 的 Proxy

Object.defineProperty(obj, prop, descriptor)

var user = { name: 'sisterAn' } Object.defineProperty(user, 'name', { enumerable: true, configurable:true, set: function(newVal) { this._name = newVal console.log('set: ' + this._name) }, get: function() { console.log('get: ' + this._name) return this._name } }) user.name = 'an' // set: an console.log(user.name) // get: an

// 监视对象 function observe(obj) { // 遍历对象，使用 get/set 重新定义对象的每个属性值 Object.keys(obj).map(key => { defineReactive(obj, key, obj[key]) }) } function defineReactive(obj, k, v) { // 递归子属性 if (typeof(v) === 'object') observe(v) // 重定义 get/set Object.defineProperty(obj, k, { enumerable: true, configurable: true, get: function reactiveGetter() { console.log('get: ' + v) return v }, // 重新设置值时，触发收集器的通知机制 set: function reactiveSetter(newV) { console.log('set: ' + newV) v = newV }, }) } let data = {a: 1} // 监视对象 observe(data) data.a // get: 1 data.a = 2 // set: 2

// 获得数组原型 const arrayProto = Array.prototype export const arrayMethods = Object.create(arrayProto) // 重写以下函数 const methodsToPatch = [ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse' ] methodsToPatch.forEach(function (method) { // 缓存原生函数 const original = arrayProto[method] // 重写函数 def(arrayMethods, method, function mutator (...args) { // 先调用原生函数获得结果 const result = original.apply(this, args) const ob = this.__ob__ let inserted // 调用以下几个函数时，监听新数据 switch (method) { case 'push': case 'unshift': inserted = args break case 'splice': inserted = args.slice(2) break } if (inserted) ob.observeArray(inserted) // 手动派发更新 ob.dep.notify() return result }) })

export function set(target: Array<any> | Object, key: any, val: any): any { // target 为数组 if (Array.isArray(target) && isValidArrayIndex(key)) { // 修改数组的长度, 避免索引>数组长度导致 splice() 执行有误 target.length = Math.max(target.length, key); // 利用数组的 splice 方法触发响应式 target.splice(key, 1, val); return val; } // target 为对象, key 在 target 或者 target.prototype 上 且必须不能在 Object.prototype 上,直接赋值 if (key in target && !(key in Object.prototype)) { target[key] = val; return val; } // 以上都不成立, 即开始给 target 创建一个全新的属性 // 获取 Observer 实例 const ob = (target: any).__ob__; // target 本身就不是响应式数据, 直接赋值 if (!ob) { target[key] = val; return val; } // 进行响应式处理 defineReactive(ob.value, key, val); ob.dep.notify(); return val; }

const p = new Proxy(target, handler)

var handler = { get: function(target, name){ return name in target ? target[name] : 'no prop!' }, set: function(target, prop, value, receiver) { target[prop] = value; console.log('property set: ' + prop + ' = ' + value); return true; } }; var user = new Proxy({}, handler) user.name = 'an' // property set: name = an console.log(user.name) // an console.log(user.age) // no prop!

const toProxy = new WeakMap(); // 存放被代理过的对象 const toRaw = new WeakMap(); // 存放已经代理过的对象 function reactive(target) { // 创建响应式对象 return createReactiveObject(target); } function isObject(target) { return typeof target === "object" && target !== null; } function hasOwn(target,key){ return target.hasOwnProperty(key); } function createReactiveObject(target) { if (!isObject(target)) { return target; } let observed = toProxy.get(target); if(observed){ // 判断是否被代理过 return observed; } if(toRaw.has(target)){ // 判断是否要重复代理 return target; } const handlers = { get(target, key, receiver) { let res = Reflect.get(target, key, receiver); track(target,'get',key); // 依赖收集== return isObject(res) ?reactive(res):res; }, set(target, key, value, receiver) { let oldValue = target[key]; let hadKey = hasOwn(target,key); let result = Reflect.set(target, key, value, receiver); if(!hadKey){ trigger(target,'add',key); // 触发添加 }else if(oldValue !== value){ trigger(target,'set',key); // 触发修改 } return result; }, deleteProperty(target, key) { console.log("删除"); const result = Reflect.deleteProperty(target, key); return result; } }; // 开始代理 observed = new Proxy(target, handlers); toProxy.set(target,observed); toRaw.set(observed,target); // 做映射表 return observed; }