Proxy

1. Proxy

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

ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);

var film={
    title:'穿过寒冬拥抱你',
    price:45
}

var proxy=new Proxy(film,{
    get(target,attr){
        console.log("get触发了");
        //return "123"
        //return target[attr];
        //定制返回值 如果查找不到当前的值,返回error
        if(attr in target){
            return target[attr];
        }else{
            throw new Error(`你当前访问的属性${attr}不存在`)
        }
    },
    set(target,attr,value){
        console.log("set触发了");
        //console.log("value",value)
        //target[attr]=value;
        //定制设置的属性,如果设置的值超过了最大返回,返回error
        if(attr=='price'){
            if(value>300){
                throw new Error("你设置的属性值超过了最大范围")
            }else {
                 target[attr] = val;
            }
        }else{
                target[attr] = val;
        }
    }
})

console.log(proxy.title);
console.log(proxy.price);
proxy.title="雄狮少年";
proxy.price=123;
console.log(proxy.title);
try{
    console.log(proxy.age);
}catch(err){
    console.log(err);
}

上面代码中，作为构造函数，Proxy接受两个参数。第一个参数是所要代理的目标对象，即如果没有Proxy的介入，操作原来要访问的就是这个对象；第二个参数是一个配置对象，对于每一个被代理的操作，需要提供一个对应的处理函数，该函数将拦截对应的操作。比如，上面代码中，配置对象有一个get方法，用来拦截对目标对象属性的访问请求。get方法的两个参数分别是目标对象和所要访问的属性。可以看到，由于拦截函数总是返回35，所以访问任何属性都得到35。

注意，要使得Proxy起作用，必须针对Proxy实例（上例是proxy对象）进行操作，而不是针对目标对象（上例是空对象）进行操作。如果handler没有设置任何拦截，那就等同于直接通向原对象。

2. Proxy常见操作

• get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy['foo']

  get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选。

// 如果访问目标对象不存在的属性，会抛出一个错误。如果没有这个拦截函数，访问不存在的属性，只会返回undefined。
var person = {
    name: "张三"
};

var proxy = new Proxy(person, {
    get: function(target, propKey) {
        if (propKey in target) {
            return target[propKey];
        } else {
            throw new ReferenceError("Prop name " + propKey + " does not exist.");
        }
    }
});

proxy.name // "张三"
proxy.age // 抛出一个错误

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

  set方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。

var person = {
    name: "张三",
    age:20
};
var proxy = new Proxy(person, {
    set(target , key , val){
        if(key == "age"){
            if(val>150){
                throw new Error("年龄不符合要求")
            }else{
                target[key] = val
            }
        }
    }
});

proxy.age = 200;

3. proxy实现双向绑定

<div id="app">
    <input type="text" id="ipt" />
</div>
<script>
var ipt = document.getElementById("ipt");
var obj = {
    val: null
};
// 需求: 想让 obj.val 跟 视图的输入框 进行关联绑定
var proxy = new Proxy(obj, {
    set(target, key, val) {
        targert.val = val;
        ipt.value = val;
    },
    get(target, propKey) {
        target[propKey] = ipt.value;
        return target[propKey];
    }
});

// 当通过代理对象 修改数据 obj.val时, 会发现 视图层 的输入框的值也跟着改变了
proxy.val = 'hello bf!';
// 当在视图层input框输入内容后,发现 数据obj.val也跟着自动改变了
document.getElementById("ipt").onchange = function() {
    console.log(proxy.val);
};