ES6之Proxy

一、定义

Proxy用于修改某些操作的默认行为，可以理解成在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。换句话说就是Proxy对象就是允许对JS中的一切合法对象的基本操作进行自定义，然后用自定义的操作去覆盖其对象的基本操作，说白了就是重写其所属类或构造函数中的基本操作

二、语法

let proxy = new Proxy(target, handler)

target：目标对象（待操作对象），需要使用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组、函数，甚至另一个代理）
handler：自定义操作方法的一个对象，，最多可包含13个操作方法，也可以是空对象
proxy：一个被代理后的新对象，它拥有target的一切属性和方法，只不过其行为和结果是在handler中自定义的。在一定程度上可以看成是对target的引用

三、作用

1、在目标对象之前架设一层拦截，外界对该对象的访问都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写
2、ES6原生提供Proxy构造函数，用来生成Proxy实例
3、通过handler对象中的拦截方法拦截目标对象target的某些操作（如读取、赋值、函数调用、new等），然后过滤或者改写这些操作的默认行为
4、生成的实例对象是针对target对象的拦截器，也可以叫做代理器
5、如果handler是个空对象（{}），那么操作拦截器相当于直接操作目标对象target

四、Proxy拦截器的13种方法（只介绍其中的两种）

1、get方法
get(target, propKey, receiver)：拦截某个属性的读取操作，接收三个参数，依次为目标对象、属性名、和Proxy实例本身，最后一个参数是可选的，一般情况下指向的是proxy对象，但是如果proxy作为其他对象的原型时，则指向读取该属性的对象

var person = {
    name: "张三"
};

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

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

2、set方法
set(target, propKey, value, receiver)：拦截某个属性的赋值操作，接收4个参数，依次为目标对象、属性名、属性值和Proxy实例本身，最后一个参数是可选的。返回一个布尔值

let validator = {
    set: function(obj, prop, value) {
        if (prop === 'age') {
            if (!Number.isInteger(value)) {
                throw new TypeError('The age is not an integer');
            }
            if (value > 200) {
                throw new RangeError('The age seems invalid');
            }
        }

        // 对于age以外的属性，直接保存
        obj[prop] = value;  
    }
};

let person = new Proxy({}, validator);

person.age = 100;
console.log(person.age)     // 100
person.age = 'young'     // 报错
person.age = 300     // 报错

五、实例

1、get方法应用

let test = {
    name: "Julian小龙虾"
};
test = new Proxy(test, {
    get(target, key) {
        console.log('获取getter属性');
        return target[key];
    }
});
console.log(test.name);

解析：首先创建一个test对象，里面有name属性，然后使用Proxy将其包装起来，再返回给test，此时的test已经成为一个Proxy实例，我们对其的操作都会被Proxy拦截。handler中定义了get函数，当获取test属性时会触发此函数

2、set方法应用

let julian = {
    name: "Julian",
    age: 18
};
julian = new Proxy(julian, {
    get(target, key) {
        let result = target[key];
        //如果是获取 年龄 属性，则添加 岁字
        if (key === "age"){
            result += "岁";
        }
        return result;
    },
    set(target, key, value) {
        if (key === "age" && typeof value !== "number") {
            throw Error("age字段必须为Number类型");
        }
        return Reflect.set(target, key, value);     //将target对象的name属性设置为value。返回值为 boolean ，true 表示修改成功，false 表示失败。当 target 为不存在的对象时，会报错
    }
});
console.log(`我叫${julian.name}  今年${julian.age}了`);     // 获取name和age的属性值
julian.age = "not a number";     // 报错
//julian.age = 20;
//console.log(`我叫${julian.name}  我今年${julian.age}了`);      // 正常输出并修改了age的值

解析：定义了julian对象，其中有age和name两个字段，我们在Proxy的get拦截函数中添加了一个判断，如果是取age属性的值，则在后面添加岁。在set拦截函数中判断如果是更改age属性时，类型不是number则抛出错误。

六、ES3、ES5、ES6实现同一个例子的对比

要求：有一组数据，有name、age、sex三个属性，其中name和age是可读可写属性，但是sex是只读属性，用ES3、ES5、ES6分别实现
实现步骤：首先顶一个构造函数，内部定义一个data数据，包含name、age、sex三个属性，一个get方法，一个set方法。get方法用来读数据，set方法用来写数据，写数据的时候进行判断，如果设置的是sex属性就给出错误提示
1、ES3实现

var Person = function(){
    var data = {
        name:'Julian小龙虾',
        age:18,
        sex:'男'
    }
    this.get = function(key){
        console.log(key)
        return data[key]
    }
    this.set = function(key,value){
        if(key!=='sex'){
            return data[key] = value
        }else{
            throw '该属性为只读属性'
        }
    }
}
var person = new Person;
var name = person.get('name')
person.set('sex','女')
console.log(person.get('sex'))

ES3实现结果.png

2、ES5实现：通过defineProperty方法设置sex户型为不可写属性

var person = {
    name:'Julian小龙虾',
    age:30
}
Object.defineProperty(person,'sex',{
    writable:false,
    value:'男'
})
person.sex = '女'
console.log(person.sex)     // 男

3、ES6实现

var person = {
    name:'Julian小龙虾',
    age:18,
    sex:'男'
}
var p1 = new Proxy(person,{
    get(target,key){
        console.log(target)
        console.log(key)
        return target[key]
    },
    set(target,key,value){
        if(key=='sex'){
            throw '不允许修改sex'
        }else{
            target[key] = value
        }
    }
})
p1.name
p1.sex = '女'

ES6实现结果.png