一、Proxy是什么？
1.1 理解Proxy
MDN定义：Proxy 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。
通俗的讲Proxy是一个对象操作的拦截器，拦截对目标对象的操作，进行一些自定义的行为，一种分层的思想有点类似spring的AOP。
1.2 Proxy怎么用
let p = new Proxy(target, handler);
语法非常简单,只有两个参数，很好理解
target
用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler
一个对象，其属性是当执行一个操作时定义代理的行为的函数。
var proxy = new Proxy({}, {
get: function(target, property) {
return 35;
}
});
let obj = Object.create(proxy);
obj.time // 35
无操作转发代理
代理对象p会将所有应用到它的操作转发到目标对象target上，可以直接对代理对象进行操作，操作会转发到目标对象上。
let target = {};
let p = new Proxy(target, {});
p.a = 37; // 操作转发到目标
console.log(target.a); // 37. 操作已经被正确地转发
1.3 可以拦截的操作
一共有 13 种可代理操作，每种操作的代号（属性名/方法名）和触发这种操作的方式列举如下。注意，如果没有定义某种操作，那么这种操作会被转发到目标对象身上。
- handler.getPrototypeOf()
在读取代理对象的原型时触发该操作，比如在执行 Object.getPrototypeOf(proxy) 时。 - handler.setPrototypeOf()
在设置代理对象的原型时触发该操作，比如在执行 Object.setPrototypeOf(proxy, null) 时。 - handler.isExtensible()
在判断一个代理对象是否是可扩展时触发该操作，比如在执行 Object.isExtensible(proxy) 时。 - handler.preventExtensions()
在让一个代理对象不可扩展时触发该操作，比如在执行 Object.preventExtensions(proxy) 时。 - handler.getOwnPropertyDescriptor()
在获取代理对象某个属性的属性描述时触发该操作，比如在执行 Object.getOwnPropertyDescriptor(proxy, “foo”) 时。 - handler.defineProperty()
在定义代理对象某个属性时的属性描述时触发该操作，比如在执行 Object.defineProperty(proxy, “foo”, {}) 时。 - handler.has()
在判断代理对象是否拥有某个属性时触发该操作，比如在执行 “foo” in proxy 时。 - handler.get()
在读取代理对象的某个属性时触发该操作，比如在执行 proxy.foo 时。 - handler.set()
在给代理对象的某个属性赋值时触发该操作，比如在执行 proxy.foo = 1 时。 - handler.deleteProperty()
在删除代理对象的某个属性时触发该操作，比如在执行 delete proxy.foo 时。 - handler.ownKeys()
在获取代理对象的所有属性键时触发该操作，比如在执行 Object.getOwnPropertyNames(proxy) 时。 - handler.apply()
当目标对象为函数，且被调用时触发。 - handler.construct()
在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行new proxy() 时。
1.4 this的指向
需要特别注意代理对象和拦截操作中的this指向问题
一旦对象被代理之后，他的this就指向了代理对象
二、Proxy能干什么？
Proxy 各种常用的拦截都能干什么，常用的四种操作
2.1 get()
get方法用于拦截某个属性的读取操作,可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身。所有的属性调用都会进入同一个get即使是没有的属性。
- 可以创造一些本来没有的属性
- 可以在取数据时对数据进行验证和转换
- 可以自定义一些语法糖操作
- get返回一个函数的话可以把一个属性转换成方法
var base = {
a:100,
small:"hello world!!"
}
var proxy = new Proxy(base,{
get(target, property,receiver){
//属性转换成函数
if("fn" === property ){
return function(value){
console.log(value)
}
}
if("ghost" === property ){
return "ghost"
}
if("fn" === property ){
return function(value){
console.log(value)
}
}
//自定义语法糖
if(property.includes("_")){
const direct = property.split("_")[1]
const propertyBase = property.split("_")[0]
switch (direct){
case "Big":
return receiver[propertyBase].toLocaleUpperCase()
default:
break;
}
}
if(!(property in target)){
throw new ReferenceError("Property \"" + property + "\" does not exist.");//验证属性值
}
return target[property]
}
})
console.log(proxy.a)//输出100 正常访问
proxy.fn("fn")//输出fn 属性转换为方法
console.log(proxy.small_Big)//输出 HELLO WORLD!! 自定义语法糖
console.log(proxy.ghost)//输出ghost 创建属性
console.log(proxy.ghost_Big)//输出GHOST receiver的使用
console.log(proxy.b)//数据验证 抛出错误
2.2 set()
set方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。
- 可以用来验证属性是否符合要求
- 可以用来更改数据格式
- 可以用来监听数据更改事件
- 屏蔽一些赋值操作比如以"_"开头的私有变量
var base = {
a:100,
small:"hello world!!"
}
const A_Change_Event="aChangeEvent";
window.addEventListener(A_Change_Event,(e)=>{
console.log(e.data.value)
})
var proxy = new Proxy(base,{
set(obj, property, value,receiver){
if("a" === property ){
if (!Number.isInteger(value)) {
throw new TypeError('The'+property+'is not an integer');
}
if (value > 100){
throw new RangeError('The '+property+' seems invalid');
}
obj[property] = value;
//事件
const dataChangeEvent = new Event(A_Change_Event);//创建一个事件
dataChangeEvent.data = {value}
window.dispatchEvent(dataChangeEvent)
}
}
})
proxy.a = 80;
console.log(proxy.a)
proxy.a = 120;
2.3 apply()
函数对象也可以作为代理的目标对象
apply方法拦截函数的调用、call和apply操作。
apply方法可以接受三个参数，分别是目标对象、目标对象的上下文对象（this）和目标对象的参数数组。
最简单的例子
var target = function () { return 'I am the target'; };
var handler = {
apply: function () {
return 'I am the proxy';
}
};
var p = new Proxy(target, handler);
p()
// "I am the proxy"
2.4 construct ()
construct 拦截的是new操作
接受三个参数
- target：目标对象
- args：构造函数的参数对象
- newTarget：创造实例对象时，new命令作用的构造函数
三 案例
3.1拦截数组
// 对数组进行拦截处理
let arr = [
{
title: '活着',
author: '余华--'
},
{
title: '三体',
author: '刘慈欣--'
},
{
title: '雪国',
author: '川端康成--'
},
]
let proxy2 = new Proxy(arr, {
get(arr, key) {
const author = arr[key].author
arr[key].author = author.slice(-1, 2)
return arr[key]
}
})
console.log(proxy2[1])
3.2表单验证
class Validate {
max(value, len) {
return value.lengh <= len
}
min(value, len) {
return value.lengh >= len
}
idNumber(value) {
return /^\d+$/.test(value)
}
}
// 代理工厂
function proxyFactory(target) {
return new Proxy(target, {
get(target, key) {
return target[key]
},
set(target, key, el) {
const rule = el.getAttribute('rule')
const validate = new Validate()
let state = rule.split(',').every((item) => {
const info = item.split(':')
return validate[info[0]](el.value, info[1])
})
console.log(state)
return true
}
})
}
const proxy = proxyFactory(document.querySelectorAll('[validate]'))
proxy.forEach((item, i) => {
item.addEventListener('keyup', function () {
proxy[i] = this
})
})