ES6 Proxy多層嵌套示例代碼

const data = {
    test: '123',
    info: {
        name: 'bruce',
        age: 20,
        test: {
            a: 1,
            b: 2
        }
    }
}
//
const handler = {
    get(target, key, recevier) {
        return Reflect.get(target, key, recevier)
    },
    set: function(target, key, value) {
        Reflect.set(target, key, value)
    }
}

function createProxy(obj) {
    for (const key in obj) {
        if (typeof obj[key] === 'object') {
            obj[key] = addSubProxy(obj[key])
        }
    }
    return new Proxy(obj, handler)
}

function addSubProxy(subObj) {
    for (const key in subObj) {
        if (typeof subObj[key] === 'object') {
            subObj[key] = addSubProxy(subObj[key])
        }
    }
    //
    return new Proxy(subObj, handler) 
}
//
const tempProxy = createProxy(data)；

======================================這是分割線=================================

關於Proxy多層對象監聽優化：

//
const handler = {
    get(target, key, recevier) {
        if (typeof target[key] === 'object') {
            addSubProxy(target[key])
        }
        return Reflect.get(target, key, recevier)
    },
    set: function(target, key, value) {
        Reflect.set(target, key, value)
    }
}

function createProxy(obj) {
    return addSubProxy(obj)
}

function addSubProxy(subObj) {
    //
    return new Proxy(subObj, handler)
}
//
const tempProxy = createProxy(data)