概念
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
语法
let p = new Proxy(target, handler);
set
const obj = { name: '' }
const proxy = new Proxy(obj, {
set: (target, prop, value) => {
target[prop] = value.toString().toUpperCase();
},
})
proxy.name = 'a';
console.log(obj)
console.log(proxy)
get
const obj = {
name: 'a'
}
const proxy = new Proxy(obj, {
get: (target, prop) => {
return target[prop].toString().toUpperCase()
}
})
console.log(proxy.name)
has
const obj = { name: '' }
const proxy = new Proxy(obj, {
has: (target, prop) => {
console.log(`call ${prop} values ${target[prop]}`)
return target[prop] !== undefined;
},
})
console.log('name' in proxy)
deleteProperty
const obj = {
a: 1,
b: 2
}
const proxy = new Proxy(obj, {
deleteProperty: (target, prop) => {
if (prop === 'b') {
return false
}
delete target[prop]
return true
}
})
delete proxy.b
console.log(obj)
delete proxy.a
console.log(obj)
apply
function sum(a, b) {
return a + b;
}
const absSum = new Proxy(sum, {
apply(target, thisArg, args) {
const value = target.apply(thisArg, args);
return value < 0 ? -value : value;
}
});
console.log(absSum(-1, -2));
更多API见https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy#
Proxy 相比于 Object.defineProperty 优势
监听数组事件
const obj = {}
var list = [1, 2, 3]
Object.defineProperty(obj, 'list', {
get: () => {
return list
},
set: (newVal) => {
console.log(newVal)
list = newVal
}
})
obj.list.push(4)
obj.list = [1, 2, 3, 4, 5]
const list = [1, 2, 3]
var proxyObj = new Proxy(list, {
set: (target, property, value) => {
console.log('set')
console.log(property, value)
return Reflect.set(target, property, value);
}
})
proxyObj.push(4)
Reflect对象与Proxy对象一样，也是ES6为了操作对象而提供的新API。
详见: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect
监听的是一整个对象而非对象的某个属性
let p = new Proxy(target, handler);
vs
Object.defineProperty(obj, prop, descriptor)
支持嵌套代理
let obj = {
info: {
name: 'eason',
blogs: ['webpack', 'babel', 'cache']
}
}
let handler = {
get(target, key) {
console.log('get', key)
// 递归创建并返回
if (typeof target[key] === 'object' && target[key] !== null) {
return new Proxy(target[key], handler)
}
return Reflect.get(target, key)
},
set(target, key, value) {
console.log('set', key, value)
return Reflect.set(target, key, value)
}
}
let proxy = new Proxy(obj, handler)
// 以下两句都能够进入 set
proxy.info.name = 'Zoe'
proxy.info.blogs.push('proxy')
使用场景
实现观察者模式
Vue 3.0 使用 Proxy 代替 Object.defineProperty 实现双向绑定
数据校验
const obj = {
phone: '13888888888'
}
const proxy = new Proxy(obj, {
set: (target, prop, value) => {
if (prop === 'phone' && !/^(\+86)?1[\d]{10}$/.test(value)) {
return false;
}
target[prop] = value;
return true;
}
})
proxy.phone = 'a'
console.log(proxy)
proxy.phone = '13899999999'
console.log(proxy)
添加实用方法
const list = [
{ name: 'a', phone: '13888888888' },
{ name: 'b', phone: '13899999999' },
];
const proxyList = new Proxy(list, {
get: (target, prop) => {
if (prop in target) {
return target[prop];
}
for (const item of target) {
if (item.name === prop) {
return item;
}
}
return undefined;
}
});
console.log(proxyList[0]);
console.log(proxyList["a"]);
Proxy的坑
this指向问题
const target = {
m: function () {
console.log(this === target);
}
};
const proxy = new Proxy(target, {});
target.m() // true
proxy.m() // false
解决
const target = {
m: function () {
console.log(this === target);
}
};
const proxy = new Proxy(target, {
get(target, prop) {
return target[prop].bind(target);
}
});
target.m() // true
proxy.m() // true
