了解并了解代理对象

1. Proxy对象到底是什么？

Proxy对象到底代表什么？ 代理对象的功能是允许您通过代理创建和操作代理对象，以自定义给定对象的某些行为。

Proxy(target,handler); Proxy 构造函数接受两个对象。 第一个参数是要处理的对象，第二个参数是要定制的方法集合（即 object ）。

很抽象？其实这和js中的Object.defineProperty（即vue2.x中用于实现底层的访问器属性）非常相似。

Object.defineProperty 定义访问器属性，允许您控制特定属性的读写行为。 这也可以通过代理来完成，代理更加灵活和强大。 您可以控制许多访问器属性。 你不能做什么。

例如，监听属性删除事件（delete obj.prop;）、事件内（'id' of obj;）、apply 调用等。

首先，检查代理对象包含哪些内容。

var targetObj = { id: 1, name: 'pxh',age: 20, school: '小学' } var handler = {}; // 这里targetOb的第一个j的行为不干扰，只需传递一个空对象作为输入。 var proxy = new proxy(targetObj,handler); console.log(proxy);

检查代理输出，如下所示。

可以看到，代理对象包含一个Handler属性、一个Target属性和一个IsRevoked，每个属性的值为接收处理程序和 targetObj 并为 false。

这个isRevoked表示是否可以撤消。 使用 Proxy.revocable() 方法生成可撤销代理对象。 有关更多信息，请访问 MDN 并阅读文档。

2.通过代理对象操作原始对象

上面我们创建了一个代理对象。 接下来，尝试操作代理对象来操作原始对象。 使用代理对象与使用本机对象相同。 （实际上是映射到代理对象内部的。）

var targetObj = { id: 1, name: 'pxh',age: 20, school: '小学' } var handler = {};首先不想干扰 targetObj 的行为，所以我们只传递一个空对象。 var proxy = new Proxy(targetObj,handler); /** * 1. 读取并修改属性。 可以看到原来对象的属性也发生了变化 */ console.log(proxy.age); // 20 console.log(targetObj.age); // 20 proxy.age = 22; .age); // 22 console.log(targetObj.age); // 22 /** * 2. 删除代理对象。 影响原对象属性的属性 */ console.log(proxy.school); // 小学 console.log(targetObj.school); // 小学 delete proxy.age;nsole.log(proxy.school); // undefined console.log(targetObj.school); //unknown3、set 和 get 方法

现在我们可以开始干扰原始对象的行为。 具体来说，我们通过实施以下方法来达到干预主体行为的目的。

handler.apply

handler.construct 干预构造函数的新行为。

handler.defineProperty 介入对象的数据或访问器属性的定义。

handler.deleteProperty 干预对象属性的删除行为。

handler.get 介入对象属性的读取操作。

handler.getOwnProperty是对象属性的特征值。

handler.has干预对象的in行为（obj的prop）。

handler.isExtensible

handler.ownKeys

handler.set 干预对象的属性设置行为。

...

首先干预get操作（属性读取操作）。

var targetObj = { id: 1, name: 'pxh',age: 20, school: '小学' } VAR HANDLER = {// 定义get方法。 get方法可以接受两个参数：原始对象和一个属性 get: function (target, prop) {console.log(`${prop} genus genus 属于 genus正在查看属性`); console.log(targetObj == target); // ); / ** * 可以看到打印顺序如下。 * id 属性可见 * true * 1 */

接下来，将一些属性更改为“私有”。 例如，不允许使用 id 属性。 read

定义set方法，不允许修改id、name、age属性

var targetObj = { id: 1, name: 'pxh',age: 20, school: '小学' } var handler = { // get方法的定义，get方法可以接受两个参数：原始对象和属性 get: function(target,prop){ if(prop == 'id '){ return undefined returns target[prop]; ; }, //定义set方法。 set方法比get多了一个参数，就是属性改变时的值。 设置：函数（目标，属性，值）{ if（prop == 'id' || prop == '名称' | | prop == 'age ') {Console.log(`${prop} 属性不允许更改`)} Else {target[prop] = value;}}; VAR proxy = new proxy(targetObj, handler);/** *更改属性。 单独输出 * 不允许修改id属性 * 不允许修改name属性 * / 不允许修改age属性 */ proxy.id = 'pxh222 '; proxy.age = 23; .school = 'Middle School' ; // 这没有打印 /** * 读取属性显示不同的打印 *unknown * pxh * 20 * Middle School // 这没有拦截，所以你可以更改它 */ console. log(proxy.id ); console.log(proxy.age); console.log(proxy.school); 4 干扰删除行为（对delete obj.prop语句有效） >同样删除对象属性。 不允许行为干预，删除id、姓名、年龄属性。

var targetObj = { id: 1, name: 'pxh',age: 20, school: '小学' } var handler = { // 在handler中定义get 和 get 方法可以接受两个参数：原始对象和 get 属性。 返回目标[prop]。 }, // set方法比get多了一个参数，即属性改变时的值 set : function(target,prop,value){ if(prop == 'id' | | prop == ' name' || prop == 'Age') {console.log(`${prop} 属性无法更改`)} else {target [prop] = value;},/** *此方法需要一个布尔值指示成功或失败。* 如果返回值不是布尔值，则将类型转换为布尔值并返回。 'age'){ console.log(`不允许删除 ${prop} 属性`); else{ 删除目标[prop];返回真。 ;remove proxy.id ); /** *对象是否具有特定属性)

上面不允许您检索对象的 ID 值，也不允许您修改或删除它。 我暂时隐藏它。

var targetObj = { id: 1, name: 'pxh',age: 20, school: '小学' } var handler = { // 在handler中定义一个get方法，并给每个get方法两个参数检索原始对象和属性。 function(target,prop){ if(prop == 'id'){ returnunknown; returns target[prop]; }, // set 方法比 get 多一个参数。 即该属性发生变化时的值。 设置：函数（target,prop,value){ if(prop == 'id' || prop == 'name' || prop == 'age'){ console.log(`${prop} 不允许修改属性 }else { target [prop] = value; */ DeleteProperty: function(target,prop){ if(prop == 'id' || prop == 'name' || prop == 'age'){ console.log(`删除${prop} attribute is not allowed`); False; 对象是否具有特定属性 * 如果返回值不是布尔值，则类型转换为布尔值并返回 */ has: function(target,prop){ if(prop == 'id' ){return false} Else {返回目标中的属性;}}}; console.log('ID' in the project); '); // true6.概述

同样，代理可以通过多种方式干预对象的行为，因此我们在此不一一介绍。 如果您有兴趣，请点击 MDN 文档。

推荐教程：《微信小程序》

PHP快速学习视频免费教程（从入门到精通）

如何学习PHP？ ? 我应该去哪里学习PHP？ 不用担心。 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：了解并了解代理对象 https://zhujicankao.com/123676.html