用proxy写一个递归来监听嵌套对象甚至JSON

最新推荐文章于 2024-07-18 09:04:01 发布

sunq1982

最新推荐文章于 2024-07-18 09:04:01 发布

阅读量4k

点赞数 1

分类专栏： javascript ES6 文章标签：递归 javascript es6

本文链接：https://blog.csdn.net/sunq1982/article/details/79470948

版权

本文介绍了如何使用JavaScript的proxy解决递归监听嵌套对象的问题，避免内存泄漏。通过一个递归函数，可以监听包括数组在内的整个JSON数据结构。然而，这种方法会直接修改目标对象。此外，提供了类和函数两种封装方式来实现对象变化的监听，但需要注意，当对proxy赋值为新对象时，新值不会被监听，需在handler的set方法中处理。

摘要由CSDN通过智能技术生成

之前的这篇文章
[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 =