深入理解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://walker-learn.xyz/archives/4340

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

相关推荐

  • Go工程师体系课 018【学习笔记】

    API 网关与持续部署入门(Kong & Jenkins) 对应资料目录《第 2 章 Jenkins 入门》《第 3 章 通过 Jenkins 部署服务》,整理 Kong 与 Jenkins 在企业级持续交付中的实战路径。即便零基础,也能顺着步骤搭建出自己的网关 + 持续部署流水线。 课前导览:什么是 API 网关 API 网关位于客户端与后端微服务…

    个人 2025年11月25日
    19000
  • 深入理解ES6 006【学习笔记】

    Symbol和Symbol属性 第6种原始数据类型:Symbol。私有名称原本是为了让开发者们创建非字符串属性名称而设计的,但是一般的技术无法检测这些属性的私有名称 创建Symbol let firstName = Symbol(); let person = {} person[firstName] = "Nicholas"; cons…

    个人 2025年3月8日
    1.2K00
  • Nuxt3_扫盲 入门与原理介绍【学习笔记】

    Nuxt 3 入门与原理介绍 💡 什么是 Nuxt 3? Nuxt 3 是基于 Vue 3 和 Vite 打造的全栈前端框架,支持: 服务端渲染(SSR) 静态站点生成(SSG) 单页应用(SPA) 构建全栈应用(支持 API) Nuxt 3 是 Vue 的“加强版”,帮你简化项目结构和开发流程。 🔧 核心原理 功能 Nuxt 如何处理 ✅ 页面路由 自动根…

    个人 2025年4月6日
    2.1K00
  • Go工程师体系课 003【学习笔记】

    grpc grpc grpc-go grpc 无缝集成了 protobuf protobuf 习惯用 Json、XML 数据存储格式的你们,相信大多都没听过 Protocol Buffer。 Protocol Buffer 其实是 Google 出品的一种轻量 & 高效的结构化数据存储格式,性能比 Json、XML 真的强!太!多! protobuf…

    个人 2025年11月25日
    18800
  • 深入理解ES6 009【学习笔记】

    javascript中的类 function PersonType(name){ this.name = name; } PersonType.prototype.sayName = function(){ console.log(this.name) } var person = new PersonType("Nicholas") p…

    个人 2025年3月8日
    1.2K00
简体中文 繁體中文 English
欢迎🌹 Coding never stops, keep learning! 💡💻 光临🌹