Proxy 的巧用

feng409 發(fā)布于2019-08-26 10:10 / 1732人閱讀

摘要：為了保證的可讀性，本文采用意譯而非直譯。對象的所有用法，都是上面的這種形式。其中用來生成實(shí)例，是表示所要攔截的對象，是用來定制攔截行為的對象。雖然不同的創(chuàng)建模式支持類似的功能，但無法用隱式初始值包裝對象。

為了保證的可讀性，本文采用意譯而非直譯。

想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！

Proxy 介紹

使用Proxy，你可以將一只貓偽裝成一只老虎。下面大約有6個(gè)例子，我希望它們能讓你相信，Proxy 提供了強(qiáng)大的 Javascript 元編程。

盡管它不像其他ES6功能用的普遍，但Proxy有許多用途，包括運(yùn)算符重載，對象模擬，簡潔而靈活的API創(chuàng)建，對象變化事件，甚至Vue 3背后的內(nèi)部響應(yīng)系統(tǒng)提供動力。

Proxy用于修改某些操作的默認(rèn)行為，也可以理解為在目標(biāo)對象之前架設(shè)一層攔截，外部所有的訪問都必須先通過這層攔截，因此提供了一種機(jī)制，可以對外部的訪問進(jìn)行過濾和修改。這個(gè)詞的原理為代理，在這里可以表示由它來“代理”某些操作，譯為“代理器”。

ES6原生提供了Proxy構(gòu)造函數(shù)，用來生成Proxy實(shí)例。

var proxy = new Proxy(target, handler);

Proxy對象的所有用法，都是上面的這種形式。不同的只是handle參數(shù)的寫法。其中new Proxy用來生成Proxy實(shí)例，target是表示所要攔截的對象，handle是用來定制攔截行為的對象。

下面是 Proxy 最簡單的例子是，這是一個(gè)有陷阱的代理，一個(gè)get陷阱，總是返回42。

let target = {
  x: 10,
  y: 20
}

let hanler = {
  get: (obj, prop) => 42
}

target = new Proxy(target, hanler)

target.x //42
target.y //42
target.x // 42

結(jié)果是一個(gè)對象將為任何屬性訪問操作都返回“42”。這包括target.x，target["x"]，Reflect.get(target, "x")等。

但是，Proxy 陷阱當(dāng)然不限于屬性的讀取。它只是十幾個(gè)不同陷阱中的一個(gè)：

handler.get

handler.set

handler.has

handler.apply

handler.construct

handler.ownKeys

handler.deleteProperty

handler.defineProperty

handler.isExtensible

handler.preventExtensions

handler.getPrototypeOf

handler.setPrototypeOf

handler.getOwnPropertyDescriptor

Proxy 用例

默認(rèn)值/“零值”

在 Go 語言中，有零值的概念，零值是特定于類型的隱式默認(rèn)結(jié)構(gòu)值。其思想是提供類型安全的默認(rèn)基元值，或者用gopher的話說，給結(jié)構(gòu)一個(gè)有用的零值。

雖然不同的創(chuàng)建模式支持類似的功能，但Javascript無法用隱式初始值包裝對象。Javascript中未設(shè)置屬性的默認(rèn)值是undefined。但 Proxy 可以改變這種情況。

const withZeroValue = (target, zeroValue) => new Proxy(target, {
  get: (obj, prop) => (prop in obj) ? obj[prop] : zeroValue
})

函數(shù)withZeroValue 用來包裝目標(biāo)對象。如果設(shè)置了屬性，則返回屬性值。否則，它返回一個(gè)默認(rèn)的“零值”。

從技術(shù)上講，這種方法也不是隱含的，但如果我們擴(kuò)展withZeroValue，以Boolean (false), Number (0), String (""), Object ({})，Array ([])等對應(yīng)的零值，則可能是隱含的。

let pos = {
  x: 4,
  y: 19
}

console.log(pos.x, pos.y, pos.z) // 4, 19, undefined

pos = withZeroValue(pos, 0)

console.log(pos.z, pos.y, pos.z) // 4, 19, 0

此功能可能有用的一個(gè)地方是坐標(biāo)系。繪圖庫可以基于數(shù)據(jù)的形狀自動支持2D和3D渲染。不是創(chuàng)建兩個(gè)多帶帶的模型，而是始終將z默認(rèn)為 0 而不是undefined，這可能是有意義的。

負(fù)索引數(shù)組

在JS中獲取數(shù)組中的最后一個(gè)元素方式通過寫的很冗長且重復(fù)，也容易出錯(cuò)。這就是為什么有一個(gè)TC39提案定義了一個(gè)便利屬性Array.lastItem來獲取和設(shè)置最后一個(gè)元素。

其他語言，如Python和Ruby，使用負(fù)組索引更容易訪問最后面的元素。例如，可以簡單地使用arr[-1]替代arr[arr.length-1]訪問最后一個(gè)元素。

使用 Proxy 也可以在 Javascript 中使用負(fù)索引。

const negativeArray = (els) => new Proxy(els, {
  get: (target, propKey, receiver) => Reflect.get(target,
    (+propKey < 0) ? String(target.length + +propKey) : propKey, receiver)
});

一個(gè)重要的注意事項(xiàng)是包含handler.get的陷阱字符串化所有屬性。對于數(shù)組訪問，我們需要將屬性名稱強(qiáng)制轉(zhuǎn)換為Numbers，這樣就可以使用一元加運(yùn)算符簡潔地完成。

現(xiàn)在[-1]訪問最后一個(gè)元素，[-2]訪問倒數(shù)第二個(gè)元素，以此類推。