ES9 中使用 Proxy 实现 JavaScript 对象的跟踪-JavaScript中文网-JavaScript教程资源分享门户

ES9 中使用 Proxy 实现 JavaScript 对象的跟踪

Proxy 是 JavaScript 语言的一个新的设计模式，通过使用 Proxy 可以拦截并且改变对象的默认行为。ES6 中引入了 Proxy，ES9 进一步完善了 Proxy 的设计改变了它的使用方法。ES9 中的 Proxy 可以被用来跟踪 JavaScript 对象的变化。

Proxy 可以在读取或者修改对象属性时拦截并且处理对象属性的操作，它们通过代理对象去访问原始对象，在访问的过程中，我们可以通过使用 get 和 set 方法，改变代理对象的默认行为。使用 Proxy 可以实现对象的跟踪、拦截和处理，这是 ES9 中一个非常方便的工具。

下面来看一下如何使用 ES9 中的 Proxy 实现 JavaScript 对象的跟踪，以便更好地理解 Proxy 的用法。

给对象添加 Proxy

当我们想要给一个对象添加 Proxy 时，我们需要使用 new Proxy 函数来生成代理对象。下面是一个简单的示例代码，我们可以通过这个代码来了解如何添加一个 Proxy 对象。

// www.javascriptcn.com code example
const target = {
    name: "John",
    hobby: ["swimming", "reading", "writing"]
};

const handler = {
    get(target, propKey){
        console.log(`getting ${propKey}`);
        return target[propKey];
    },

    set(target, propKey, newValue){
        console.log(`setting ${propKey} to ${newValue}`);
        target[propKey] = newValue;
        return true;
    }
};

const proxy = new Proxy(target, handler);

proxy.name;        //getting name
proxy.hobby[0];    //getting 0
proxy.hobby.push("running");  //setting 3 to running

可以看出，在上方的示例代码中，我们使用了 Proxy 为一个名为 target 的对象添加了一个代理对象。handler 对象用于实现对目标对象的跟踪，当我们通过代理对象来访问目标对象的属性时，会调用 handler 中的 get() 方法。

在 handler 中，我们定义了 get() 和 set() 方法分别用于对目标对象的属性进行读取和修改的拦截和处理，当我们通过代理对象来修改目标对象的属性时，会调用 handler 中的 set() 方法。

给对象添加递归 Proxy

在某些情况下，我们需要对目标对象的每个属性都添加一个递归 Proxy 来跟踪属性的变化。下面是一个示例代码，我们可以通过这个代码了解如何为目标对象的每个属性添加递归 Proxy。

// www.javascriptcn.com code example
const target = {
    name: "John",
    info: {
        age: 30,
        occupation:{
            title: "engineer",
            firm: "ABC inc."
        }
    }
};

const handler = {
    get(target, propKey, receiver){
        const val = Reflect .get(target, propKey, receiver)
        if (typeof val !== "object") {
            return val;
        } else {
            return new Proxy(val, handler);
        }
    },

    set(target, propKey, newValue){
        console.log(`setting ${propKey} to ${newValue}`);
        target[propKey] = newValue;
        return true;
    }
};

const proxy = new Proxy(target, handler);

proxy.info.occupation.title = "developer";  // setting title to developer

在上方的代码中，我们使用了一个递归的 Proxy 对象来跟踪目标对象的每一个属性。当我们访问 info 对象的属性时，会返回一个对象的代理对象。通过代理对象来访问目标对象的内嵌属性时，会继续生成新的属性的代理对象，这样就实现了递归代理的功能。在这个例子中，我们访问了 target.info.occupation.title 属性，并将它修改为 developer。

结语

到此为止，我们就通过一个详细的教程来了解了如何使用 ES9 中的 Proxy 实现 JavaScript 对象的跟踪。通过使用 Proxy 可以实现对象的跟踪、拦截和处理，这是 ES9 中一个非常方便的工具。在实际应用中，我们可以根据我们的需求来灵活地使用 Proxy，并且可以根据我们的具体情况调整 Proxy 的使用方法。同时，Google Chrome 等主流浏览器都已支持 Proxy，我们可以在 Web 开发中广泛使用它的功能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d01f82e46428fe9ecc0828

ES9 中使用 Proxy 实现 JavaScript 对象的跟踪

接着读