Proxy 是 ES6 规范定义的标准内置对象,可以对目标对象的读取、函数调用等操作进行拦截。一般来说,通过 Proxy 可以让目标对象“可控”,比如是否能调用对象的某个方法,能否往对象添加属性等等。
const originalObj = {name: 'xialei'};
const publicObj = new Proxy(originalObj, {set(target, prop, value) {
// 将属性值转化为大写
target[prop] = value.toString().toUpperCase();
}
});
publicObj.name = 'xialei';
console.log(publicObj.name); // XIALEI
从上例可以看出 Proxy 不需要更改目标对象(也就是 originalObj),就可以对 originalObj 的行为进行拦截。
语法
let obj = new Proxy(target, handler);
- target
Object
目标对象。可以是任何类型的对象,甚至包括原生对象(比如数组,函数,另一个 Proxy 对象) - handler
Object
代理行为对象。访问目标对象时会自动触发该 handler 的对应属性。
和大多数开发者一样,刚开始学习 Proxy 的时候,这个 handler 不知道是个什么东西,什么时候能触发。
先看一个简单的例子,看看 handler 到底是什么东西。假设我们开发一个游戏脚本,由于内存修改器的盛行,我们需要对内存中的数据进行安全处理,但是不能影响外部使用,我们使用 Proxy 完成这个功能。
const gameObj = {hp: 0};
const publicGameObj = new Proxy(gameObj, {get(target, prop) {return target[prop]/2;
},
set(target, prop, value) {target[prop] = value*2;
}
});
publicGameObj.hp = 10000;
console.log(publicGameObj.hp, gameObj); // 10000 {hp: 20000}
gameObj 是我们在内存中真实存储数据的地方,可以看到 HP 是 20000,但是 publicGameObj.hp 是 10000,外部使用 publicGameObj.hp 即可(比如 UI 层展示 HP 为 10000);
例程 handler 使用到的属性
- get
publicGameObj.hp
进行了读取操作,因此会自动触发 handler 的 get 方法 - set
publicGameObj.hp=10000
进行了赋值操作,因此为自动触发 handler 的 set 方法
handler 对象
handler 对象是 Proxy 的核心基础,所有对目标对象的操作都需要通过 handler 来处理,虽然内容有点多,但是常用的不多。
说明
- 目标对象 被代理的对象。外部不能直接访问(当然语法上是可以访问的,你都用上 Proxy 了,还访问他干嘛?)
- 代理对象 new Proxy 的返回值。外部直接访问。目标对象会作为 handler 对应函数的参数传入
- 带 * 号的是常用属性
所有访问都是对代理对象访问才会触发,直接访问目标对象不会触发(代理对象压根没参与进来,如果触发那一定是出 bug 了)
handler.getPrototypeOf(target)
说明:获取目标对象的原型
触发时机:Object.getPrototypeOf(代理对象)
参数:
- target
Object
目标对象
返回值:
-
Object
对象的原型
const array = [];
const myArray = new Proxy(array, {getPrototypeOf(target) {console.log('读取对象原型');
return Object.getPrototypeOf(array);
}
});
console.log(Object.getPrototypeOf(myArray));
// 输出
// 读取对象原型
// []
handler.setPrototypeOf(target, prototype)
说明:设置对象的原型
触发时机:Object.setPrototypeOf(代理对象, 原型)
参数:
- target
Object
目标对象 - prototype
Object
原型对象或 null
返回值:
-
boolean
设置成功返回 true,否则返回 false(比如不让设置)
const array = [];
const myArray = new Proxy(array, {setPrototypeOf(target, prototype) {Object.setPrototypeOf(target, prototype);
return true;
}
});
Object.setPrototypeOf(myArray, Object.prototype);
console.log(Object.getPrototypeOf(myArray)); // {}
handler.isExtensible(target)
说明:检测对象是否可扩展 (个人理解:也就是能否添加属性、函数)
触发时机:Object.isExtensible(代理对象)
参数:
- target
Object
目标对象
返回参数:
boolean
handler.preventExtensions(target)
说明:设置目标对象为不可扩展
触发时机:Object.preventExtensions(代理对象)
参数:
- target
Object
目标对象
返回值:
-
boolean
设置目标对象不可扩展后返回 true,不管是否设置目标对象不可扩展,返回 false 都会报错
const obj = {};
const p = new Proxy(obj, {preventExtensions(target) {Object.preventExtensions(target);
return true;
}
});
Object.preventExtensions(p);
p.a = 1;
console.log(p); // {} 目标对象不可扩展,所以 a 属性设置不进去
*handler.getOwnPropertyDescriptor(target, prop)
说明:获取目标对象属性的描述符
触发时机:Object.getOwnPropertyDescriptor(代理对象)
参数:
- target
Object
目标对象 - prop
<string|Symbol|number>
属性名
返回参数:
-
Object
属性描述符
const obj = {a: 1};
const p = new Proxy(obj, {getOwnPropertyDescriptor(target, prop) {return target[prop];
}
});
console.log(Object.getOwnPropertyDescriptor(obj, 'a')); // {value: 1, writable: true, enumerable: true, configurable: true}
*handler.defineProperty(target,prop,properties)
说明:在对象上定义属性 (添加新属性或修改现有属性)
触发时机:Object.defineProperty(代理对象,属性名,属性描述对象)
参数:
- target
Object
目标对象 - prop
string|number|Symbol
属性名 - properties
Object
属性描述对象
返回值:
-
boolean
定义成功返回 true,定义失败或不允许定义返回 false
const obj = {
name: 'xialei',
name2: 'xx'
};
const p = new Proxy(obj, {defineProperty(target, prop, properties) {if (prop === 'name') {Object.defineProperty(target, prop, properties);
return true;
}
return false;
}
});
Object.defineProperty(p, 'name', {value: 'aaa',});
Object.defineProperty(p, 'name2', { // TypeError
value: 'aaa',
});
*handler.has(target, prop)
说明:判断对象是否有指定属性
触发时机:prop in 代理对象
参数:
- target
Object
目标对象 - prop
string|number|Symbol
属性名
返回值:
boolean
*handler.get(target, prop, receiver)
说明: 属性读取器
触发时机:读取代理对象的属性时触发
参数:
- target
Object
目标对象 - prop
string|number|Symbol
属性名 - receiver
Proxy
代理对象或者原型链上的代理对象
返回值:
- 任何值
const obj = {name: 'xialei'};
const p = new Proxy(obj, {get(target, prop) {if(prop in target) {return target[prop].toUpperCase();}
return undefined;
}
});
console.log(p.name); // XIALEI
*handler.set(target, prop, value, receiver)
说明:属性写入访问器
触发时机:对代理对象的属性进行赋值时触发
参数:
- target
Object
目标对象 - prop
string|number|Symbol
属性名 - value
any
属性值 - receiver
Proxy
代理对象或原型链上的代理对象
返回值:
-
boolean
赋值成功返回 true,否则返回 false。严格模式下返回 false 会抛出 TypeError
*handler.deleteProperty(target, prop)
说明:删除对象属性
触发时机:对代理对象的属性进行 delete 时触发
参数:
- target
Object
目标对象 - prop
string|number|Symbol
属性名
返回值:
-
boolean
删除成功返回 true,否则返回 false。严格模式下返回 false 会抛出 TypeError
*handler.apply(target, thisArg, args)
说明:拦截函数调用,被代理对象必须是函数
触发时机:
- 直接调用函数 obj.xxx()或 xxx()
- apply/call
参数:
- target
Object
目标函数 - thisArg
Object
this 对象 - args
Array
参数列表
返回值:
-
any
任何值
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)); // 3,因为被拦截了
*handler.construct(target,args)
说明:拦截构造过程
触发时机:new 目标构造函数(…args)
参数:
- target
Function
构造函数 - args
Array
构造函数的参数
返回值:
-
Object
对象
function Person(name) {this.name = name;}
const P = new Proxy(Person, {construct(target, args, newTarget) {console.log(newTarget, newTarget === P, newTarget === Person); // [Function: Person] true false
return new target(args[0].toUpperCase());
}
});
const p = new P('xialei');
console.log(p); // Person {name: 'XIALEI'}
使用场景
- 保护目标对象(通过钩子方法进行拦截)
- 数据转换(上文有一个内存保护的例子)
-
数据验证(不符合规则的值不允许设置)
const privateUser = { name: 'xialei', phone: '13888888888' }; const user = new Proxy(privateUser, {set(target, prop, value) {if (prop === 'phone' && !/^(\+86)?1[\d]{10}$/.test(value)) {return false;} target[prop] = value; return true; } }); user.phone = '13666666666'; console.log(user.phone); // 13666666666 user.phone = '+8613777777777'; console.log(user.phone); // +8613777777777 user.phone = '1'; console.log(user.phone); // +8613777777777
-
数据修正(也做数据标准化)
const privateUser = { name: 'xialei', phone: '13888888888' }; const user = new Proxy(privateUser, {set(target, prop, value) {if (prop === 'phone' && !/^(\+86)?1[\d]{10}$/.test(value)) {return false;} target[prop] = value.replace('+86',''); return true; } }); user.phone = '+8613666666666'; console.log(user.phone); // 13666666666
-
添加实用方法
const list = [{ name: 'xialei', phone: '13888888888'}, {name: 'xialei1', phone: '13899999999'}, ]; const mList = 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; } }); const firstItem = mList[0]; const itemXialei = mList["xialei"]; console.log(firstItem); // {name: 'xialei', phone: '13888888888'} console.log(itemXialei);// {name: 'xialei', phone: '13888888888'}
-
提供易用 API
// 本例对 localStorage 做了封装,可以像普通对象一样操作 localStorage, 而不需要调用方法 const storage = new Proxy(localStorage, {get(target, prop) {return localStorage.getItem(prop); }, set(target, prop, value) {localStorage.setItem(prop, value); return true; }, deleteProperty(target, prop) {localStorage.removeItem(prop); }, has(target, prop) {return localStorage.getItem(prop) !== null; } }); storage.aaa = '1'; console.log(storage.aaa); // '1' delete storage.aaa; console.log(storage.aaa); // undefined
总结
Proxy 的语法虽然简单,但是可谓前途无量,比如开了一个 Virtual Dom 框架也是可以的。
更多原创文章,尽在每天进步一点点