深入理解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

相關推薦

  • Go工程師體系課 007【學習筆記】

    商品微服務 實體結構說明 本模塊包含以下核心實體: 商品(Goods) 商品分類(Category) 品牌(Brands) 輪播圖(Banner) 品牌分類(GoodsCategoryBrand) 1. 商品(Goods) 描述平台中實際展示和銷售的商品信息。 字段說明 字段名 類型 說明 name String 商品名稱,必填 brand Pointer …

    個人 2025年11月25日
    28100
  • Go工程師體系課 006【學習筆記】

    項目結構說明:user-web 模塊 user-web 是 joyshop_api 工程中的用戶服務 Web 層模塊,負責處理用戶相關的 HTTP 請求、參數校驗、業務路由以及調用後端接口等功能。以下是目錄結構說明: user-web/ ├── api/ # 控制器層,定義業務接口處理邏輯 ├── config/ # 配置模塊,包含系統配置結構體及讀取邏輯 …

    個人 2025年11月25日
    28500
  • 深入理解ES6 010【學習筆記】

    改進的數組功能 new Array()的怪異行為,當構造函數傳入一個數值型的值,那麼數組的length屬性會被設為該值;如果傳入多個值,此時無論這些值是不是數值型的,都會變為數組的元素。這個特性另人困惑,你不可能總是注意傳入數據的類型,所以存在一定的風險。 Array.of() 無論傳多少個參數,不存在單一數值的特例(一個參數且數值型),總是返回包含所有參數…

    個人 2025年3月8日
    1.3K00
  • Node深入淺出(聖思園教育) 001【學習筆記】

    node 從異步編程範式理解 Node.js Node.js 的定位與核心思想 基於 V8 引擎 + libuv 事件驅動庫,將 JavaScript 從瀏覽器帶到服務器側。 採用單線程事件循環處理 I/O,最大化利用 CPU 等待 I/O 的時間片,特別適合高併發、I/O 密集型場景。 “不要阻塞主線程”是設計哲學:盡量把耗時操作交給內核或線程池,回調結果…

    個人 2025年11月24日
    34100
  • Go工程師體系課 014【學習筆記】

    rocketmq 快速入門 去我們的各種配置(podman)看是怎麼安裝的 概念介紹 RocketMQ 是阿里開源、Apache 頂級項目的分布式消息中間件,核心組件: NameServer:服務發現與路由 Broker:消息存儲、投遞、拉取 Producer:消息生產者(發送消息) Consumer:消息消費者(訂閱並消費消息) Topic/Tag:主題/…

    個人 2025年11月25日
    24200
簡體中文 繁體中文 English