单机网页游戏网站,微网站开发,wordpress添加文件,短视频素材库免费下载无水印文章目录 概要Proxy 语法handler 对象的方法Proxy 示例常用handler 对象的方法的参数handler.get()语法示例 handler.set()语法示例 使用场景验证值修正及附加属性 小结 概要
Proxy 用于创建一个对象的代理#xff0c;将对原对象上的操作#xff08;属性获取、赋值、函数调用… 文章目录 概要Proxy 语法handler 对象的方法Proxy 示例常用handler 对象的方法的参数handler.get()语法示例 handler.set()语法示例 使用场景验证值修正及附加属性 小结 概要
Proxy 用于创建一个对象的代理将对原对象上的操作属性获取、赋值、函数调用等转移到这个代理上拦截对原始对象操作实现自定义操作和避免直接操作原对象。
也就是说通过创建一个对象的代理中间人后我们需要先和代理沟通由代理再对原对象进行沟通这个过程允许我们自定义一些操作实现对原对象的增强。
Proxy 语法
实现一个代理语法如下
const p new Proxy(target, handler) target 要使用Proxy 包装的目标对象这个对象可以是任何类型对象、包含原生数组、函数甚至是另一个代理。 handler 一个通常以函数作为属性的对象其属性中的函数分别定义了在执行各种操作的代理自定义行为。 开发者就是通过这些属性告诉代理需要拦截target 哪些操作需要做哪些操作。
在Proxy中JavaScript 允许我们对以下的操作进行拦截具体有以下handler方法
handler 对象的方法 handler.get() 属性读取操作的捕捉器。 handler.set() 属性设置操作的捕捉器。 handler.has() in 操作符的捕捉器。 handler.deleteProperty() delete 操作符的捕捉器。 handler.defineProperty() Object.defineProperty 方法的捕捉器。 handler.ownKeys() Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器。 handler.apply() 函数调用操作的捕捉器。 handler.construct() new 操作符的捕捉器。 handler.getPrototypeOf() Object.getPrototypeOf 方法的捕捉器。 handler.setPrototypeOf() Object.setPrototypeOf 方法的捕捉器。
Proxy 示例
在以下简单的例子中当对象中不存在属性名时默认返回值为 37。下面的代码以此展示了 get handler 的使用场景。
const handler {get: function (obj, prop) {return prop in obj ? obj[prop] : 37;},
};const p new Proxy({}, handler);
p.a 1;
p.b undefined;console.log(p.a, p.b); // 1, undefined
console.log(c in p, p.c); // false, 37上面代码中我们为{} 一个空对象创建了代理p 给p 为 对象拦截了 属性的获取操作。 并为对象的a 属性赋值了1给b属性赋值了undefined 注意这些操作最后都会由代理转发到源对象身上也就是说 原始对象{} 的 a\b 属性也有值和p 一样。
当我们操作p.a 时代理p 便会拦截 get 方法执行get函数里面的逻辑。
常用handler 对象的方法的参数
通过上面的简单示例我们发现在定义handler 的属性中我们可以通过方法的参数获取到一些值下面对一些常用的方法进行详细讲解
handler.get()
handler.get 方法用于拦截对象的读取属性操作。get 方法可以返回任何值。
该方法会拦截目标对象的以下操作
访问属性proxy[foo] 和 proxy.bar访问原型链上的属性Object.create(proxy)[foo]Reflect.get()
语法
var p new Proxy(target, {get: function (target, property, receiver) {},
});target 目标对象。 property 被获取的属性名。 receiver Proxy 或者继承 Proxy 的对象
示例
var p new Proxy({},{get: function (target, prop, receiver) {console.log(called: prop);return 10;},},
);console.log(p.a); // called: a; ouptut 10handler.set()
handler.set() 方法是设置属性值操作的捕获器。set() 方法应当返回一个布尔值true 表示成功false会抛出异常
该方法会拦截目标对象的以下操作
指定属性值proxy[foo] bar 和 proxy.foo bar指定继承者的属性值Object.create(proxy)[foo] barReflect.set()
语法
new Proxy(target, {set(target, property, value, receiver) {}
});value 新属性值。 receiver 最初接收赋值的对象。通常是 proxy 本身但 handler 的 set 方法也有可能在原型链上或以其他方式被间接地调用因此不一定是 proxy 本身
示例
var p new Proxy({},{set: function (target, prop, value, receiver) {target[prop] value;console.log(property set: prop value);return true;},},
);console.log(a in p); // falsep.a 10; // property set: a 10
console.log(a in p); // true
console.log(p.a); // 10使用场景
验证
通过代理我们可以对传入的值进行验证可以借助 handler.set() 方法
我们下面实现以下功能 通过代理验证一个对象的age 属性如果设置成非数字或者大于200都会出错不能成功被赋值代码如下所示
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);}}// The default behavior to store the valueobj[prop] value;// 表示成功return true;},
};let person new Proxy({}, validator);person.age 100;console.log(person.age);
// 100person.age young;
// 抛出异常Uncaught TypeError: The age is not an integerperson.age 300;
// 抛出异常Uncaught RangeError: The age seems invalid当我们设置age 100 时候是可以正常执行的。 但我们设置成“young”或者300都会抛出异常使得赋值无法执行。
值修正及附加属性
以下products代理会计算传值并根据需要转换为数组。这个代理对象同时支持一个叫做 latestBrowser的附加属性这个属性可以同时作为 getter 和 setter。
let products new Proxy({browsers: [Internet Explorer, Netscape],},{get: function (obj, prop) {// 附加一个属性if (prop latestBrowser) {return obj.browsers[obj.browsers.length - 1];}// 默认行为是返回属性值return obj[prop];},set: function (obj, prop, value) {// 附加属性if (prop latestBrowser) {obj.browsers.push(value);return;}// 如果不是数组则进行转换if (typeof value string) {value [value];}// 默认行为是保存属性值obj[prop] value;// 表示成功return true;},},
);console.log(products.browsers); // [Internet Explorer, Netscape]
products.browsers Firefox; // 如果不小心传入了一个字符串
console.log(products.browsers); // [Firefox] - 也没问题得到的依旧是一个数组products.latestBrowser Chrome;
console.log(products.browsers); // [Firefox, Chrome]
console.log(products.latestBrowser); // Chrome小结
proxy用于创建一个对象的代理实现对原对象操作属性获取、赋值进行拦截从而实现自定义操作避免直接作用于原对象通过代理来操作最后由代理作用于原对象。proxy可以代理任何对象包括普通对象、函数、甚至是另一个proxy使用proxy 创建代理时需要传入原对象和handlerhandler 是一个对象有多个方法组成这些方法名需要以指定形式出现否则不生效。
