一、定义
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
网友评论