深入理解ES6 012【学习笔记】

代理(Proxy)和反射(Reflection)API

代理是一种可以拦截并改变底层javascript引擎操作的包装器,在新语言中通过它暴露内部运作对象,从而让开发者可以创建内建的对象。

代理陷阱 覆写的特性 默认特性
get 读取一个属性值 Reflect.get()
set 写入一个属性值 Reflect.set()
has in操作符 Reflect.has()
deleteProperty delete操作符 Reflect.deleteProperty()
getPropertyOf Object.getPropertyOf() Reflect.getPropertyOf()
setPropertyOf Object.setPropertyOf() Reflect.setPropertyOf()
isExtensible Object.isExtensible() Reflect.isExtensible()
preventExtensions Object.preventExtensions() Reflect.preventExtensions()
getOwnPropertyDescriptor Object.getOwnPropertyDescriptor() Reflect.getOwnPropertyDescriptor()
defineProperty Object.defineProperty() Reflect.defineProperty()
ownKeys Object.keys()
Object.getOwnPropertyNames()
Object.getOwnPropertySymbols()
Reflect.ownKeys()
apply 调用一个函数 Reflect.apply()
construct 用new调用一个函数 Reflect.construct()

## 创建一个简单的代理

 let target = {}
 let proxy = new Proxy(target,{}),

 proxy.name = "proxy";
 console.log(proxy.name) // proxy
 console.log(target.name) // proxy

 target.name = "target"
console.log(proxy.name) // target
 console.log(target.name) // target

使用set陷阱验证属性

接受4个参数

  • trapTarget 用于接收属性(代理的目标) 的对象
  • key 要写入的属性键
  • value 被写入属性的值
  • receiver 操作发生的对象(通常是代理)
let target = {
  name:"target"
}
let proxy = new Proxy(target,{
  set(trapTarget,key,value,recevier){
    // 忽略不希望受到影响的已有属性
    if(!trapTarget.hasOwnProperty(key)){
      if(isNaN(value)){
        throw new TypeError('属性必须是数字')
      }
    }
    // 添加属性
    return Reflect.set(trapTarget,key,value,recevier)
  }
})
proxy.count = 1;
console.log(proxy.count) // 1
console.log(target.count) // 1

// 由于目标已经有name属性因而可以给它赋值
proxy.name = "proxy"
console.log(proxy.name) // proxy
console.log(target.name) // proxy
// 给不存在的属性赋值会抛出错误
proxy.otherName = "proxy"

后面的不想看……有空再说吧

主题测试文章,只做测试使用。发布者:Walker,转转请注明出处:https://joyjs.cn/archives/4340

(0)
Walker的头像Walker
上一篇 2025年3月8日 12:52
下一篇 2025年3月8日 12:52

相关推荐

  • 深入理解ES6 003【学习笔记】

    函数 参数默认值,以及一些关于arguments对象,如何使用表达式作为参数、参数的临时死区。 以前设置默认值总是利用在含有逻辑或操作符的表达式中,前一个值是false时,总是返回后面一个的值,但如果我们给参数传0时,就有些麻烦。需要去验证一下类型 function makeRequest(url,timeout,callback){ timeout = t…

    个人 2025年3月8日
    79300
  • 无畏前行,拳释力量 🥊💪

    拼搏,是一种态度 生活就像一场比赛,没有捷径可走,只有不断训练、突破、超越,才能站上属于自己的舞台。这不仅是一种对抗,更是一种自我的觉醒——敢于迎战,敢于挑战,敢于成为更强的自己。 运动中的拼搏精神 无论是拳击、跑步,还是力量训练,每一次出拳、每一次挥汗、每一次咬牙坚持,都是对身体与心灵的磨炼。拼搏不是单纯的对抗,而是一种态度——面对挑战,不退缩;面对失败,…

    个人 2025年2月26日
    80000
  • TS珠峰 001【学习笔记】

    课程大纲 搭建 TypeScript 开发环境。 掌握 TypeScript 的基础类型,联合类型和交叉类型。 详细类型断言的作用和用法。 掌握 TypeScript 中函数、类的类型声明方式。 掌握类型别名、接口的作用和定义。 掌握泛型的应用场景,熟练应用泛型。 灵活运用条件类型、映射类型与内置类型。 创建和使用自定义类型。 理解命名空间、模块的概念已经使…

    个人 2025年3月27日
    90800
  • TS珠峰 003【学习笔记】

    装饰器 // 装饰器 // 只能在类中使用(类本身,类成员使用) // 装饰器,类的装饰器,属性装饰器,访问装饰器 参数装饰器 // 1. 类型装饰器 给类进行扩展,也可以返回一个子类 // 先要在tsconfig.json中开启experimentalDecorators const classDecorator1 = <T extends new …

    个人 2025年3月27日
    87100
  • 深入理解ES6 005【学习笔记】

    解构:使用数据访问更便捷 如果使用var、let或const解构声明变量,则必须要提供初始化程序(也就是等号右侧的值)如下会导致错误 // 语法错误 var {tyep,name} // 语法错误 let {type,name} // 语法错误 const {type,name} 使用解构给已经声明的变量赋值,哪下 let node = { type:&qu…

    个人 2025年3月8日
    79400

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
欢迎🌹 Coding never stops, keep learning! 💡💻 光临🌹