《每天十分钟》-红宝书第4版-代理与反射(二)

代理另一个代理
代理可以拦截反射 API 的操作,而这意味着完全可以创建一个代理,通过它去代理另一个代理。这样就可以在一个目标对象之上构建多层拦截网:

 foo: 'bar' 
}; 
const firstProxy = new Proxy(target, { get() { console.log('first proxy'); return Reflect.get(...arguments); } 
}); 
const secondProxy = new Proxy(firstProxy, { get() { console.log('second proxy'); return Reflect.get(...arguments); } 
}); 
console.log(secondProxy.foo); 
// second proxy 
// first proxy 
// ba

代理的问题与不足

  1. 代理中的 this
 thisValEqualsProxy() { return this === proxy; } 
} 
const proxy = new Proxy(target, {}); 
console.log(target.thisValEqualsProxy()); // false 
console.log(proxy.thisValEqualsProxy()); // true

以上代码符合预期

const wm = new WeakMap(); 
class User { constructor(userId) { wm.set(this, userId); } set id(userId) { wm.set(this, userId); } get id() { return wm.get(this); } 
}
const user = new User(123); 
console.log(user.id); // 123 
const userInstanceProxy = new Proxy(user, {}); 
console.log(userInstanceProxy.id); // undefined

以上代码 ,User 实例一开始使用目标对象作为 WeakMap 的键,代理对象却尝试从自身取得这个实例。要解决这个问题,就需要重新配置代理,把代理 User 实例改为代理 User 类本身。

const UserClassProxy = new Proxy(User, {}); 
const proxyUser = new UserClassProxy(456); 
console.log(proxyUser.id);

其实一个走的是构造函数,一个是触发的 set ,而不同的this 导致的

  1. 代理与内部槽位
    一个典型的例子就是 Date 类型。根据 ECMAScript 规范,Date 类型方法的执行依赖 this 值上的内部槽位[[NumberDate]]。代理对象上不存在这个内部槽位,而且这个内部槽位的值也不能通过普通的 get()和 set()操作访问到,于是代理拦截后本应转发给目标对象的方法会抛出 TypeError:
const target = new Date(); 
const proxy = new Proxy(target, {}); 
console.log(proxy instanceof Date); // true 
proxy.getDate(); // TypeError: 'this' is not a Date object

简单说,代理就是无法代理内部插槽
Map,Set,Date,Promise 等,都使用了所谓的“内部插槽”。

let map = new Map();let proxy = new Proxy(map, {});proxy.set('test', 1); // Error

解决办法

let map = new Map();let proxy = new Proxy(map, {get(target, prop, receiver) {let value = Reflect.get(...arguments);
return typeof value == 'function' ? value.bind(target) : value;}
});proxy.set('test', 1);
alert(proxy.get('test')); // 1(工作了!)

代理捕获器与反射方法

  1. get()
const myTarget = {}; 
const proxy = new Proxy(myTarget, { get(target, property, receiver) { console.log('get()'); return Reflect.get(...arguments) } 
}); 
proxy.foo; 
// get()
  1. set()
const myTarget = {}; 
const proxy = new Proxy(myTarget, { set(target, property, value, receiver) { console.log('set()'); return Reflect.set(...arguments) } 
}); 
proxy.foo = 'bar'; 
// set()
  1. has()
const myTarget = {}; 
const proxy = new Proxy(myTarget, { has(target, property) { console.log('has()'); return Reflect.has(...arguments) } 
}); 
'foo' in proxy; 
// has()
  1. defineProperty()
  2. getOwnPropertyDescriptor()
  3. deleteProperty()
  4. ownKeys()
  5. getPrototypeOf()
  6. setPrototypeOf()
  7. isExtensible()
  8. preventExtensions()
  9. apply()
  10. construct()

代理模式
举一些有用的编程模式
14. 跟踪属性访问

const user = { name: 'Jake' 
}; 
const proxy = new Proxy(user, { get(target, property, receiver) { console.log(`Getting ${property}`); return Reflect.get(...arguments); }, set(target, property, value, receiver) { console.log(`Setting ${property}=${value}`); return Reflect.set(...arguments); } 
}); 
proxy.name; // Getting name 
proxy.age = 27; // Setting age=27
  1. 隐藏属性
const hiddenProperties = ['foo', 'bar']; 
const targetObject = { foo: 1, bar: 2, baz: 3 
}; 
const proxy = new Proxy(targetObject, { get(target, property) { if (hiddenProperties.includes(property)) { return undefined; } else { return Reflect.get(...arguments); } }, has(target, property) {if (hiddenProperties.includes(property)) { return false; } else { return Reflect.has(...arguments); } } 
}); 
// get() 
console.log(proxy.foo); // undefined 
console.log(proxy.bar); // undefined 
console.log(proxy.baz); // 3 
// has() 
console.log('foo' in proxy); // false 
console.log('bar' in proxy); // false 
console.log('baz' in proxy); // true
  1. 属性验证
const target = { onlyNumbersGoHere: 0 
}; 
const proxy = new Proxy(target, { set(target, property, value) { if (typeof value !== 'number') { return false; } else { return Reflect.set(...arguments); } } 
}); 
proxy.onlyNumbersGoHere = 1; 
console.log(proxy.onlyNumbersGoHere); // 1 
proxy.onlyNumbersGoHere = '2'; 
console.log(proxy.onlyNumbersGoHere); // 1
  1. 函数与构造函数参数验证
function median(...nums) { return nums.sort()[Math.floor(nums.length / 2)]; 
} 
const proxy = new Proxy(median, { apply(target, thisArg, argumentsList) { for (const arg of argumentsList) { if (typeof arg !== 'number') { throw 'Non-number argument provided'; } } return Reflect.apply(...arguments); } 
}); 
console.log(proxy(4, 7, 1)); // 4 
console.log(proxy(4, '7', 1)); 
// Error: Non-number argument provided
class User { constructor(id) { this.id_ = id; } 
} 
const proxy = new Proxy(User, { construct(target, argumentsList, newTarget) { if (argumentsList[0] === undefined) { throw 'User cannot be instantiated without id'; } else { return Reflect.construct(...arguments); } } 
}); 
new proxy(1); 
new proxy(); 
// Error: User cannot be instantiated without id
  1. 数据绑定与可观察对象
const userList = []; 
class User { constructor(name) { this.name_ = name; } 
} 
const proxy = new Proxy(User, { construct() { const newUser = Reflect.construct(...arguments); userList.push(newUser); return newUser; } 
}); 
new proxy('John'); 
new proxy('Jacob'); 
new proxy('Jingleheimerschmidt'); 
console.log(userList); // [User {}, User {}, User{}]

代理是 ECMAScript 6 新增的令人兴奋和动态十足的新特性。尽管不支持向后兼容,但它开辟出了一片前所未有的 JavaScript 元编程及抽象的新天地。
从宏观上看,代理是真实 JavaScript 对象的透明抽象层。代理可以定义包含捕获器的处理程序对象,而这些捕获器可以拦截绝大部分 JavaScript 的基本操作和方法。在这个捕获器处理程序中,可以修改任何基本操作的行为,当然前提是遵从捕获器不变式。与代理如影随形的反射 API,则封装了一整套与捕获器拦截的操作相对应的方法。可以把反射 API看作一套基本操作,这些操作是绝大部分 JavaScript 对象 API 的基础。
代理的应用场景是不可限量的。开发者使用它可以创建出各种编码模式,比如(但远远不限于)跟踪属性访问、隐藏属性、阻止修改或删除属性、函数参数验证、构造函数参数验证、数据绑定,以及可观察对象。

咏牡丹
宋·王溥
枣花至小能成实,桑叶虽柔解吐丝。
堪笑牡丹如斗大,不成一事又空枝。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/27794.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uniapp开发微信小程序问题汇总

1. 自定义校验规则validateFunction失效 2. 微信小程序不支持<Br>换行 在 <text></text> 标签中使用\n(必须 text 标签&#xff0c;view 标签无效 ) 3. 微信小程序无法使用本地静态资源图片的解决方法 (1) 将图片上传到服务器&#xff0c;小程序访问该图片…

MySQL基础——函数和约束

目录 1函数 1.1字符串函数 1.2数值函数 1.3日期函数 1.4流程函数 2约束 2.1约束概述和演示 2.2外键约束&#xff08;表连接键&#xff09; 1函数 函数是指一段可以直接被另一段程序调用的程序或代码。 1.1字符串函数 MySQL中内置了很多字符串函数&#xff0c;常用的…

WPF界面设计

1、使用C#-WPF实现抽屉效果-炫酷漂亮的侧边栏导航菜单-SplitViewMD主题重绘原生控件的美观效果-提供源码Demo下载 码源地址&#xff1a;https://download.csdn.net/download/Prince999999/89424685 2、使用C#-WPF实现抽屉效果-菜单导航功能实现&#xff0c;常规的管理系统应该…

JVM 一些常见问题QA

GC Roots 虚拟机栈中引用的对象&#xff1b; 本地方法栈中JNI引用的对象&#xff1b; 方法区中类静态变量引用的对象&#xff1b; 方法区中常量引用的对象&#xff1b; Full GC是Minor GCMajor GC吗&#xff1f; Minor GC&#xff1a;回收年轻代&#xff1b; Major GC&…

【强化学习】gymnasium自定义环境并封装学习笔记

【强化学习】gymnasium自定义环境并封装学习笔记 gym与gymnasium简介gymgymnasium gymnasium的基本使用方法使用gymnasium封装自定义环境官方示例及代码编写环境文件__init__()方法reset()方法step()方法render()方法close()方法 注册环境创建包 Package&#xff08;最后一步&a…

描述React的组件生命周期方法,并解释它们在何时被调用。

React的组件生命周期方法分为三个阶段&#xff1a;挂载阶段&#xff08;Mounting&#xff09;、更新阶段&#xff08;Updating&#xff09;和卸载阶段&#xff08;Unmounting&#xff09;。以下是这些阶段中各个生命周期方法的描述和调用时机&#xff1a; 挂载阶段&#xff08…

Ubuntu启动之引导内核阶段

按照Linux系统从打开电源到进入系统的顺序&#xff0c;整个启动过程可分为以下阶段。 BIOS阶段&#xff0c;Ubuntu启动之BIOS阶段-CSDN博客引导程序阶段&#xff0c;Ubuntu启动之引导程序阶段-CSDN博客内核阶段&#xff0c;加载内核、初始化。进入系统&#xff0c;显示登录界面…

搭建Python虚拟环境(三):Conda

使用Conda搭建虚拟环境的详细指南 Conda 是一个开源包管理系统和环境管理系统&#xff0c;能够安装、更新、运行和管理软件包和环境。本文将详细介绍如何使用Conda搭建虚拟环境&#xff0c;包括安装Conda、常用命令、创建虚拟环境、激活虚拟环境、退出虚拟环境以及迁移虚拟环境…

Tomcat基础详解

第一篇&#xff1a;Tomcat基础篇 lecture&#xff1a;邓澎波 一、构建Tomcat源码环境 工欲善其事必先利其器&#xff0c;为了学好Tomcat源码&#xff0c;我们需要先在本地构建一个Tomcat的运行环境。 1.源码环境下载 源码有两种下载方式&#xff1a; 1.1 官网下载 https://…

时序预测 | MATLAB实现TCN-Attention自注意力机制结合时间卷积神经网络时间序列预测

时序预测 | MATLAB实现TCN-Attention自注意力机制结合时间卷积神经网络时间序列预测 目录 时序预测 | MATLAB实现TCN-Attention自注意力机制结合时间卷积神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.MATLAB实现TCN-Attention自注意力机制结合时…

拥抱数字世界|AI在娱乐行业的应用,娱乐新纪元已到来

在蓬勃发展的全球化趋势下&#xff0c;越来越多的厂商正在批量涌入娱乐赛道&#xff0c;期待能创造新的增长奇迹。随着科技的不断发展&#xff0c;人工智能技术正日益深入各行各业&#xff0c;其中媒体和娱乐行业更是迎来了一场革命性的变革。在媒体和娱乐领域展现出了巨大的潜…

模型 商业画布

说明&#xff1a;系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。九块拼图&#xff0c;构建商业模式。 1 商业画布的应用 1.1 商业画布用于明确“GreenCycle”初创企业&#xff08;虚构&#xff09;的商业模式 假设有一家名为“GreenCycle”的初创…

多线程中run()和start()的区别

我们知道&#xff0c;在多线程中 Thread thread new Thread(runnable); thread.start();以及 thread.run();都可以执行runnable中run方法下的代码&#xff0c;但是二者又有所不同 下面给出一段代码用以体现二者的区别&#xff1a; 以下代码中&#xff0c;通过thread.start()启…

Scala的高级特性

Scala的高级特性 ☀小白的Scala学习笔记 目录 Scala的高级特性 1.匿名函数 2.如何把方法转化为函数 3.柯里化 1&#xff09;柯里化 2&#xff09;实例 3&#xff09;柯里化应用&#xff1a;排序 4&#xff09;练习 Tea 1.匿名函数 Scala 中的匿名函数是一种没有命名的…

可视化剪辑,账号矩阵管理,视频分发,聚合私信多功能一体化营销工具 源代码开发部署方案

可视化剪辑&#xff0c;账号矩阵管理&#xff0c;视频分发&#xff0c;聚合私信多功能一体化营销工具 源代码开发部署方案 可视化剪辑&#xff1a; 可视化剪辑开发是一种通过图形化界面和拖放操作&#xff0c;以可视化的方式进行影片剪辑和编辑的开发方法。它可以让非专业用户…

小知识点快速总结:Batch Normalization Layer(BN层)的作用

本系列文章只做简要总结&#xff0c;不详细说明原理和公式。 目录 1. 参考文章2. 主要作用3. 具体分析3.1 正则化&#xff0c;降低过拟合3.2 提高模型收敛速度&#xff0c;加速训练3.3 减少梯度爆炸或者梯度消失的情况 4. 补充4.1 BN层做的是标准化不是归一化4.2 BN层的公式4.…

代码随想录算法训练营第三十六天|860.柠檬水找零 406.根据身高重建队列 452. 用最少数量的箭引爆气球

LeetCode 860.柠檬水找零 题目链接&#xff1a;860.柠檬水找零 踩坑&#xff1a;以为不需要考虑具体怎么找钱&#xff0c;一直在从整体上想解决方案。 思路&#xff1a;当客户支付5元我们只需要收下&#xff0c;当客户支付10元我们只能找零5元&#xff0c;当客户支付20元我们…

adb之ps命令用法

目录 前言一、命令参数二、输出结果含义 前言 在adb shell终端&#xff0c;输入 ps&#xff0c;可查看手机当前所有的进程状态&#xff0c;其中ps的英文全称是Process Status。 ps命令对于分析系统异常情况时都是必备的技能&#xff0c;需要通过这个简单命令来查看系统真实的状…

12.IO相关概念

NIO 非阻塞IO BIO 阻塞IO stream vs channel 1.stream不会自动缓冲数据;channel会利用系统提供的发送缓冲区,接受缓冲区,更为底层。 2.stream仅支持阻塞API;channel同时支持阻塞、非阻塞API,网络channel可配合selector实现多路复用。 3.二者均为全双工,即读写可以同…

Golang 依赖注入库Wire应用案例

文章目录 简介Github指南安装案例wire.NewSetwire.Buildwire.Bindwire.Structwire.Valuewire.InterfaceValue 简介 Go语言的依赖注入库Wire是由Google提供的一个代码生成工具&#xff0c;用于简化和自动化依赖注入过程。Wire主要通过生成代码来处理依赖关系&#xff0c;而不是…