之前的这篇文章
[http://blog.csdn.net/sunq1982/article/details/79354755]
其实那个监听方式有个大bug,当不停的update 监听对象以后就会导致内存泄漏。因为每次在调用get的时候都会生成一个新的proxy,后来才知道是多傻。
经过我一天时间的思考,用了一个递归的方法去解决嵌套对象的监听问题。
下面是代码:
//传递两个参数,一个是object, 一个是proxy的handler
//如果是不是嵌套的object,直接加上proxy返回,如果是嵌套的object,那么进入addSubProxy进行递归。
function toDeepProxy(object, handler) {
if (!isPureObject(object)) addSubProxy(object, handler);
return new Proxy(object, handler);
//这是一个递归函数,目的是遍历object的所有属性,如果不是pure object,那么就继续遍历object的属性的属性,如果是pure object那么就加上proxy
function addSubProxy(object, handler) {
for (let prop in object) {
if ( typeof object[prop] == 'object') {
if (!isPureObject(object[prop])) addSubProxy(object[prop], handler);
object[prop] = new Proxy(object[prop], handler);
}
}
object = new Proxy(object, handler)
}
//是不是一个pure object,意思就是object里面没有再嵌套object了
function isPureObject(object) {
if (typeof object!== 'object') {
return false;
} else {
for (let prop in object) {
if (typeof object[prop] == 'object') {
return false;
}
}
}
return true;
}
}
这个函数的关键点就在于,你是从嵌套对象的第一个属性进行判断加proxy还是从嵌套对象的最末端先进行判断加proxy, 此函数是后者。
前者我也调试过,行不通,就不赘述了。而且前者向后递归有个问题,在初始化的时候会触发不必要的get/set 指令。
一个有趣的事情是,在js中array也是object, 所以这个方法也是可以监听array的, 衍生开去,这个方法可以监听整个JSON数据结构。
但是这个函数有个缺点,就是会直接污染 需要监听的target, 如果你不想target被污染,那么这个方法就不可行了。
下面是用法:
//这是一个嵌套了对象和数组的对象
let object = {
name: {
first: {
four: 5,
second: {
third: 'ssss'
}
}
},
class: 5,
arr: [1, 2, {arr1:10}],
age: {
age1: 10
}
}
//这是一个嵌套了对象和数组的数组
let objectArr =