深入理解ES6 012【學習筆記】

Table of Contents

• 代理（Proxy)和反射（Reflection)API
  • 使用set陷阱驗證屬性

代理（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"

後面的不想看……有空再說吧