JS数据劫持 之 Proxy设置代理
1、简介
数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。
经典的应用是Vue双向数据绑定。
常见的数据劫持实现方法有两种：
- Object.defineProperty
- Proxy设置代理（ES6新增）
本篇文章介绍Proxy的使用。
2、Proxy
2.1、介绍
new Proxy(target, handler)
- 参数：
- target：要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
- handler：一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理的行为。
- handler中常⽤的对象⽅法：
- get(target, propKey, receiver)：拦截对象的读取属性操作。
- set(target, propKey, value, receiver)：设置属性值操作的捕获器。
- has(target, propKey)：对in操作符的代理方法。
- construct(target, args)：拦截new操作符，返回的是一个对象。
- apply(target, object, args)：拦截函数的调用。
2.2、代码示例
2.2.1、get(target, propKey, receiver)
拦截对象的读取属性操作。
- target：目标对象。
- propKey：要获取的key值。
- receiver：Proxy代理自身。
const target = {
name: 'cxk'
};
const handler = {
get(target, propKey, receiver) {
console.log('---调用了get方法---');
console.log(target, propKey, receiver);
return target[propKey];
}
};
const proxy = new Proxy(target, handler);
console.log(target.name); // cxk
console.log(proxy.name);
// ---调用了get方法---
// {name: 'cxk'} 'name' Proxy {name: 'cxk'}
// cxk
2.2.2、set(target, propKey, value, receiver)
设置属性值操作的捕获器。
- target：目标对象。
- propKey：要添加或修改的key值。
- value：要把key设置成什么值。
- receiver：Proxy代理自身。
const target = {
name: 'cxk'
};
const handler = {
set(target, propKey, value, receiver) {
console.log('---调用了set方法---');
console.log(target, propKey, value, receiver);
target[propKey] = value;
}
};
const proxy = new Proxy(target, handler);
// 通过proxy添加或修改属性，触发set方法，并修改成功
proxy.age = 18;
console.log(proxy); // Proxy {name: 'cxk', age: 18}
console.log(target); // {name: 'cxk', age: 18}
// 通过target添加或修改属性，不触发set方法，也修改成功
target.age = 20;
console.log(proxy); // Proxy {name: 'cxk', age: 20}
console.log(target); // {name: 'cxk', age: 20}
2.2.3、has(target, propKey)
对in操作符的代理方法。
- target：目标对象。
- propKey：in操作符左边的参数。
const target = {
name: 'cxk',
_age: 18
};
const handler = {
has(target, propKey) {
console.log('---触发了has方法---');
console.log(target, propKey);
// 对象内部的私有属性以_开头，外部不可以访问。
if (propKey.includes('_')) {
return false;
}
return propKey in target;
}
};
const proxy = new Proxy(target, handler);
console.log('_age' in target); // true
console.log('_age' in proxy); // false
// ---触发了has方法---
// {name: 'cxk', _age: 18} '_age'
// false
2.2.4、construct(target, args)
拦截new操作符，返回的是一个对象。
- target：目标对象，也就是构造函数。
- args：被调用时的参数，是一个类数组。
function target(name) {
this.name = name;
}
const handler = {
construct(target, args) {
console.log('---触发了construct方法---');
console.log(target, args);
return new target(...args);
}
};
const proxy = new Proxy(target, handler);
new proxy('cxk', 18);
// ---触发了construct方法---
// ƒ target(name) {
// this.name = name;
// } (2) ['cxk', 18]
2.2.5、apply(target, object, args)
拦截函数的调用。
- target：目标对象，也就是函数。
- object：目标对象的上下文对象（this）。
- args：被调用时的参数，是一个类数组。
function sum(a, b) {
return a + b;
}
const handler = {
apply(target, object, args) {
console.log('---触发了apply方法---');
console.log(target, object, args);
return target(...args);
}
};
const proxy = new Proxy(sum, handler);
console.log(proxy(1, 2));
// ---触发了apply方法---
// ƒ sum(a, b) {
// return a + b;
// }
// undefined
// [1, 2]
// 3
let obj = {
a: 1,
b: 2
}
console.log(proxy.call(obj, 3, 3));
// ---触发了apply方法---
// ƒ sum(a, b) {
// return a + b;
// }
// {a: 1, b: 2}
// [3, 3]
// 6
- Proxy代理的handler对象方法很多，上述只列举了最常用的几个，其他不怎么常用的对象方法的需要读者自行搜索学习。
