当前位置: 首页 > news >正文

【TypeScript】proxy 和 Reflect

proxy (代理) 和 Reflect (反射) 参数一样。

基本用法

let person = { name: 'xx', age: 20}
// proxy 支持对象,数组,函数,set,map
// 代理对象的常用模式:前面一个对象,后面一个对象用于描述前面的对象
person.name // 取值
person.name = 'xxx' // 赋值
let personProxy = new Proxy(person, {// 拦截取值get() {},// 拦截赋值 person name xxxset(target, key, value, receiver) {return true},// 拦截函数调用apply() {},// 拦截 in 操作符has () {},// 拦截 for in ownKeys() {},// 拦截 new 操作符construct() {},// 拦截删除的操作deleteProperty(target, p) {}
})
let person = { name: 'xx', age: 20 }
// 输出 age 的值
// console.log(Reflect.get(person, 'age', person)); 
// 修改 age 的值,返回 true
// console.log(Reflect.set(person, 'age', 23, person));let personProxy = new Proxy(person, {get(target, key, receiver) {if (target.age < 18) {return Reflect.get(target, key, receiver)} else {return "xx 成年了"}}
})
// age:17 输出:17  age:20 输出:xx 成年了
console.log(personProxy.age);

实现观察者模式(简易版)

// 存储回调函数(观察者)的集合
const list: Set<Function> = new Set()
const autorun = (cb: Function) => {if (!list.has(cb)) {list.add(cb)}
}
const observable = <T extends object>(params: T) => {return new Proxy(params, {set(target, key, value, receiver) {const result = Reflect.set(target, key, value, receiver)list.forEach(fn => fn())return result}})
}
// personProxy 对象被创建,开始时 list 为空。
const personProxy = observable({ name: 'xx', attr: "newbee" })
autorun(() => {console.log("有变换了");
})
// 输出两遍 有变化了
// 修改 personProxy.attr 属性,触发 Proxy 的 set 方法,该方法会遍历 list 集合并调用已注册的回调函数,输出 "有变化了"
personProxy.attr = "no-newbee"
personProxy.name = 'xxx'
http://www.lryc.cn/news/145288.html

相关文章:

  • STM32f103入门(5)定时器中断
  • Mybatis查询数据
  • 【前车之鉴】: 2023最新教程-将java程序打包到maven私服的正确打开方式,详细流程介绍不怕你掌握不了
  • 如何理解IaaS、PaaS、SaaS?盘点受欢迎的八大SaaS平台!
  • 立创EDA专业版的原理图上器件有一个虚线框
  • JUC并发编程--------基础篇
  • 秒懂算法2
  • 隐秘的角落:Java连接Oracle提示Connection timed out
  • 基于微信小程序的餐厅预订系统的设计与实现(论文+源码)_kaic
  • 科技政策 | 四川省科学技术厅关于发布2024年第一批省级科技计划项目申报指南的通知
  • 深入了解Webpack:特性、特点和结合JS混淆加密的实例
  • 2023-08-23力扣每日一题
  • 分发饼干【贪心算法】
  • 为什么网络互联地址设置为30位地址
  • 青少年棒球锦标赛发展·棒球1号位
  • Unity实现UI图片面板滚动播放效果第二弹
  • Redis的基本操作
  • 省级智慧农业大数据平台项目规划建设方案[195页Word]
  • php图片批量压缩并同时保持清晰度
  • 243:vue+Openlayers 更改鼠标滚轮缩放地图大小,每次缩放小一点
  • NOI2015D. 荷马史诗
  • 并法编程(集合类不安全)03详细讲解未补充
  • 软考:中级软件设计师:大数据
  • 【持续更新中】QAGroup1
  • redis应用 2:延时队列
  • ChatGPT AIGC 实现动态组合图的用法
  • 【网站】解压放松的治愈白噪音ASMR
  • 算法通过村第四关-栈白银笔记|括号问题
  • 基于MATLAB开发AUTOSAR软件应用层Code mapping专题-part 6 Data Transfers标签页介绍
  • HDLBits-Verilog学习记录 | Verilog Language-Vectors