從 Vue3 原始碼學習 Proxy & Reflect

前端小智發表於2021-12-01
作者:CodeOz
譯者:前端小智
來源:dev
有夢想,有乾貨,微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。

這兩個功能都出現在ES6中,兩者配合得非常好!

Proxy

proxy 是一個外來的物件,他沒有屬性! 它封裝了一個物件的行為。它需要兩個引數。

const toto = new Proxy(target, handler)

target: 是指將被代理/包裹的物件
handler: 是代理的配置,它將攔截對目標的操作(獲取、設定等)

多虧了 proxy ,我們可以建立這樣的 traps

const toto = { a: 55, b:66 }
const handler = {
 get(target, prop, receiver) {
   if (!!target[prop]) {
     return target[prop]
    }
    return `This ${prop} prop don't exist on this object !`
  }
}

const totoProxy = new Proxy (toto, handler)

totoProxy.a // 55
totoProxy.c // This c prop don't exist on this object !

每個內部物件的 "方法" 都有他自己的目標函式

下面是一個物件方法的列表,相當於進入了 Target:

object methodtarget
object[prop]get
object[prop] = 55set
new Object()construct
Object.keysownKeys

目標函式的引數可以根據不同的函式而改變。

例如,對於get函式取(target, prop, receiver(proxy本身)),而對於 set 函式取(target, prop, value (to set), receiver)

例子

我們可以建立私有屬性。

const toto = {
   name: 'toto',
   age: 25,
   _secret: '***'
}

const handler = {
  get(target, prop) {
   if (prop.startsWith('_')) {
       throw new Error('Access denied')
    }
    return target[prop]
  },
  set(target, prop, value) {
   if (prop.startsWith('_')) {
       throw new Error('Access denied')
    }
    target[prop] = value
    // set方法返回布林值
    // 以便讓我們知道該值是否已被正確設定 !
    return true
  },
  ownKeys(target, prop) {
     return Object.keys(target).filter(key => !key.startsWith('_'))
  },
}

const totoProxy = new Proxy (toto, handler)
for (const key of Object.keys(proxy1)) {
  console.log(key) // 'name', 'age'
}

Reflect

Reflect 是一個靜態類,簡化了 proxy 的建立。

每個內部物件方法都有他自己的 Reflect 方法

object methodReflect
object[prop]Reflect.get
object[prop] = 55Reflect.set
object[prop]Reflect.get
Object.keysReflect.ownKeys

❓ 為什麼要使用它?因為它和Proxy一起工作非常好! 它接受與 proxy 的相同的引數!

const toto = { a: 55, b:66 }

const handler = {
  get(target, prop, receiver) {
   // 等價 target[prop]
   const value = Reflect.get(target, prop, receiver)
   if (!!value) {
      return value 
   }
   return `This ${prop} prop don't exist on this object !` 
  },
  set(target, prop, value, receiver) {
     // 等價  target[prop] = value
     // Reflect.set 返回 boolean
     return Reflect.set(target, prop, receiver)
  },
}

const totoProxy = new Proxy (toto, handler)

所以你可以看到 ProxyReflect api是很有用的,但我們不會每天都使用它,為了製作陷阱或隱藏某些物件的屬性,使用它可能會很好。

如果你使用的是Vue框架,嘗試修改元件的 props 物件,它將觸發Vue的警告日誌,這個功能是使用 Proxy :) !


程式碼部署後可能存在的BUG沒法實時知道,事後為了解決這些BUG,花了大量的時間進行log 除錯,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug

原文:https://dev.to/codeoz/proxy-r...

交流

有夢想,有乾貨,微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。

相關文章