Js中的Proxy对象

Proxy 这个词的原意是代理，译为代理器。可以理解成，在目标对象之前架设一层“拦截”，外界对该目标对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

一、语法

Proxy对象用于定义基本操作的自定义行为， 例如属性查找、赋值、枚举、函数调用等。

const proxy = new Proxy(tatget, handler)

• target: 目标对象（可以是任何类型的对象）；
• handler：通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理proxy的行为。

二、描述

• Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”，即对编程语言进行编程；
• ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

三、Proxy 实例的方法

• get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy[‘foo’]；
• set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy[‘foo’] = v，返回一个布尔值。

注意
虽然 Proxy 可以代理针对目标对象的访问，但它在不做任何拦截的情况下，也无法保证与目标对象的行为一致；
这个代理对目标对象进行了虚拟，因此该代理与该目标只是对象表面上可以被当作同一个对象来对待。

四、应用

//常见的一道面试题 实现 a===1&&a===2&&a===3 为true
var _a = 0;
var proxy = new Proxy(window, {
	get: function(target, key, receiver){
        if(key === "a") return ++_a;
        else return window[key];
    },
    set: function(target, key, value, receiver){ 
        return Reflect.set(target, key, value, receiver);
    }
});
console.log(proxy.a===1 && proxy.a===2 && proxy.a===3); //true

//Object.defineProperty用于监听属性，也可以实现
var _a = 0;
Object.defineProperty(window,'a', {
	get: function() {
		return ++_a;
	}
})
console.log(a===1 && a===2 && a===3); // true

• Object.defineProperty是用于监听属性，而Proxy是监听整个对象。