深入理解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
上一篇 2026年3月10日 00:00
下一篇 2026年3月8日 15:40

相关推荐

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

    块级作用域绑定 之前的变量声明var无论在哪里声明的都被认为是作域顶部声明的,由于函数是一等公民,所以顺序一般是function 函数名()、var 变量。 块级声明 块级声明用于声明在指定块的作用域之外无法访问的变量。块级作用域存在于: 函数内部 块中(字符和{和}之间的区域) 临时死区 javascript引擎在扫描代码发现变量声明时,要么将它们提升至作…

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

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

    个人 2025年4月6日
    2.2K00
  • Node深入浅出(圣思园教育) 003【学习笔记】

    WebSocket 与 SSE 总览 WebSocket 基础 定位:WebSocket 是一条在 HTTP 握手后升级的全双工连接,允许客户端与服务器在同一 TCP 通道上双向推送数据,省去了反复轮询。 握手流程: 客户端通过 Upgrade: websocket 头发起 HTTP 请求; 服务器响应 101 Switching Protocols,双方协…

    个人 2025年11月24日
    40100
  • 从0到1落地微前端架构 001【学习笔记】

    微前端 js 隔离css 隔离元素隔离生命周期预加载数据通信应用跳转多层嵌套 说明 使用的是 Mermaid 的 flowchart 语法,Markdown 渲染器如 Typora、VitePress、一些 Git 平台都支持。 保留了: 基座应用 main-vue3 各子应用:child-nuxt2-home、child-vue2-job、child-vu…

    2025年4月20日
    1.6K00
  • 向世界挥手,拥抱无限可能 🌍✨

    站得更高,看到更远 生活就像一座座高楼,我们不断向上攀登,不是为了炫耀高度,而是为了看到更广阔的风景。图中的两位女孩站在城市之巅,伸展双手,仿佛在迎接世界的无限可能。这不仅是一次俯瞰城市的旅程,更是对自由和梦想的礼赞。 勇敢探索,突破边界 每个人的生活都是一场冒险,我们生而自由,就该去探索未知的风景,去经历更多的故事。或许路途中会有挑战,但正是那些攀爬的瞬间…

    个人 2025年2月26日
    1.4K00
简体中文 繁体中文 English