前言
介绍双向绑定，数据劫持的文章有很多，作为前端圈的热点话题，我就不跟风写同质化的文章了，今天只是把发现的一些不容易被注意到的现象写出来。
方案一
核心：在 get 方法中进行递归调用
const target = {
name: 'lee',
info: {
age: 24
}
};
const isObj = (data) => {
return Object.prototype.toString.call(data) === '[object Object]'
}
const handler = {
get(trapTarget,key,receiver) {
if (!(key in receiver)) {
throw new Error(`Property ${key} does not exist.`);
}
console.log(`监听到了${key}`)
// 递归调用
if (isObj(trapTarget[key])) {
return new Proxy(trapTarget[key], handler);
}
return Reflect.get(trapTarget,key,receiver);
},
set(trapTarget,key,value,receiver) {
console.log(`修改了${key}`)
return Reflect.set(trapTarget,key,value,receiver);
}
};
const observe = (data) => {
if (!data || !isObj(data)) {
return false;
}
return new Proxy(data, handler);
}
测试：
let proxyData = observe(target);
console.log(proxyData.name);
proxyData.info.age = 30;
console.log(proxyData.info.age);
这种方法确实实现了对深层次数据的监听，但是仔细观察会发现如下现象：
- info 这个对象并不是 proxy 实例
- 当 get 被触发时，get 方法中的递归运算总是被执行
我们本来的期望是，在经过第一次的转化为 proxy 后，以后不再执行，但事实显然不是这样的。
这里发现第一个小坑：get 方法中的返回值并不会改变 proxy 实例。
如果你更细心的思考，会发现我这句结论来的有些突然，因为你会质疑我是因为 if 判断语句总是为 true 才导致上面的现象，那请你和我继续探究。
if (isObj(trapTarget[key])) {
return new Proxy(trapTarget[key], handler);
}
开始我也觉得是因为判断条件的问题，所以可以加上对 proxy 实例的判断，如果已经是 proxy ，那么不再执行，修改后是下面这样：
if (isObj(trapTarget[key]) && !isProxy(key)) {
console.log(`执行了几次${isProxy(key)}`)
const res = new Proxy(trapTarget[key], handler);
proxies[key] = 1;
return res;
}
说说如何实现 isProxy ?
原理就是将转换过的 key收集起来，之后判断是否存在。
let proxies = {};
const isProxy = (data) => {
return proxies[data];
}
推荐阅读 es6-proxies.html, 其中的实现方法是下面这样子的：
let proxies = new WeakSet();
export function createProxy(obj) {
let handler = {};
let proxy = new Proxy(obj, handler);
proxies.add(proxy);
return proxy;
}
export function isProxy(obj) {
return proxies.has(obj);
}
运行结果：
这里发现确实按照我们的期望，仅执行了一次，但是请你仔细对比图一和图二，你会发现只能监听到 info ，而无法监听到 age。
通过以上现象，可以发现，info 仍然是普通对象，get 中只是临时获取了 info 的 proxy 实例。
总结：
- 不推荐使用这种方法：
因为这种方式的监听是在操作数据时，才会对数据临时进行 proxy 转换，然后才能够监听到，而且总要执行 proxy 转化操作，这太消耗性能了。
方案二
核心：初始就递归所有属性，将深层次的是对象类型(数组类型可自行拓展)转换成 proxy 实例，这样只需执行一次。
const target = {
name: 'lee',
info: {
age: 24
}
};
const isObj = (data) => {
return Object.prototype.toString.call(data) === '[object Object]'
}
const handler = {
get(trapTarget,key,receiver) {
if (!(key in receiver)) {
throw new Error(`Property ${key} does not exist.`);
}
console.log(`监听到了${key}`)
return Reflect.get(trapTarget,key,receiver);
},
set(trapTarget,key,value,receiver) {
console.log(`修改了${key}`)
return Reflect.set(trapTarget,key,value,receiver);
}
};
let proxyData = {}
const observe = (data, key) => {
if (!data || !isObj(data)) {
return false;
}
if (key) {
proxyData[key] = new Proxy(data, handler);
} else {
// 初始化
proxyData = new Proxy(data, handler);
}
Object.keys(data).forEach(child => {
if (isObj(data[child])) {
observe(data[child], child)
}
})
}
observe(target);
console.log(proxyData.name);
proxyData.info.age = 30;
console.log(proxyData.info.age);
运行结果：
观察运行结果，可以发现基本上满足了我们的期望，只是有个小小的缺陷，请看绿色方框标注的地方，此时属于初始化过程中，起始我们并不关心此时的数据变化，所以还要增加个状态判断。
递归执行完 observe 后，将状态变成 false 即可。
if (!isInit) {
console.log(`修改了${key}`)
}
方案三
基本和方案二是相似的，唯一的区别是，直接更改了原始数据。这里不建议使用此种方法，除非应用 revoked 取消代理。
