深入理解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日
    18700
  • 深入理解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日
    18500
  • 深入理解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! 💡💻 光臨🌹