Proxy是在ES2015(ES6)中新添加內(nèi)置對(duì)象，用于自定義一些基本操作。

這篇文章是我在學(xué)習(xí)Proxy的時(shí)候?qū)τ趃et方法的一些心得。

作為ES2015新定義的內(nèi)置對(duì)象，Proxy 能夠攔截并且自定義對(duì)象以及函數(shù)的一些基本操作，具有很高的優(yōu)先級(jí)和便利性，能夠讓我們?cè)趯?xiě)代碼的時(shí)候多出一種解決難題的途徑。

Proxy的get方法用于攔截對(duì)象屬性的讀取操作，例如 obj.key 和 obj.[key]。在給Proxy的handler參數(shù)中設(shè)置get方法后，每當(dāng)進(jìn)行讀取操作時(shí)，會(huì)優(yōu)先調(diào)用該get方法，我們可以在這個(gè)方法函數(shù)中對(duì)讀取行為進(jìn)行攔截。請(qǐng)看下面的代碼：

const obj = { key: 1 }
const proxy = new Proxy(obj, {
 get: function(target, property, receiver) {
  console.log('get', property)
  return target[property]
 }
})
console.log(proxy.key)
// get key
// 1

get方法的參數(shù)一共有三個(gè)：target是實(shí)例化Proxy時(shí)使用的對(duì)象，在這個(gè)例子中是obj；而property是這次讀取操作中想要獲取的屬性名，在這個(gè)例子中是key；最后一個(gè)參數(shù)receiver則是這個(gè)實(shí)例化的Proxy自身，即proxy。
在這個(gè)例子中，我在get方法的最后返回了target[property]，這是為了能夠讓讀取操作能夠進(jìn)行下去。由于Proxy的get方法是最先被調(diào)用的，所以這里返回的內(nèi)容就是我們讀取操作能夠獲得的結(jié)果；如果我們?cè)谶@里不返回任何值，那么就會(huì)得到undefined。

receiver和死循環(huán)

要注意的是，千萬(wàn)不要在get方法中讀取receiver的屬性，因?yàn)閞eceiver實(shí)質(zhì)上就是proxy自身，所以receiver.key這句代碼就等同于proxy.key，會(huì)重新調(diào)用get方法導(dǎo)致死循環(huán)。

const obj = { key: 1 }
const proxy = new Proxy(obj, {
 get: function(target, property, receiver) {
  console.log(receiver.key)
  return target[property]
 }
})
console.log(proxy.key)
// 死循環(huán)！

原型鏈上的getter

有時(shí)候，我們會(huì)在對(duì)象之中使用getter和setter來(lái)定制屬性的賦值和讀取。在這時(shí)，如果proxy的get方法內(nèi)部有使用到target[property]的話，target[property]的值會(huì)受到目標(biāo)對(duì)象的getter的影響。因此調(diào)用get方法的時(shí)候請(qǐng)注意在目標(biāo)對(duì)象中是否有用到getter。

const obj = {
 get key() {
  return 'string'
 },
 set key(value) {
  console.log(`key is ${value}, it is a ${typeof value}`)
 }
}
const proxy = new Proxy(obj, {
 get: function(target, property, receiver) {
  if(typeof target[property] !== 'string') {
   return target[property]
  } else {
   throw new TypeError(`The type of ${property} is String!`)
  }
 }
})
proxy.key = 100
console.log(proxy, obj)
// key is 100, it is a number
// The type of key is String!

在上方的例子中，如果訪問(wèn)obj的非數(shù)字類(lèi)型的屬性，就會(huì)拋出一個(gè)錯(cuò)誤，但是由于obj中g(shù)etter的原因，無(wú)論我給key屬性賦什么值，在訪問(wèn)key屬性的時(shí)候肯定會(huì)拋出錯(cuò)誤。

如果僅僅要注意目標(biāo)對(duì)象中的getter還算容易的，但是如果目標(biāo)對(duì)象繼承自其他對(duì)象，那么事情就變得有些麻煩了，請(qǐng)看下面的例子：

const parentObj = {
 get key() {
  return 'string'
 },
 set key(value) {
  console.log(`key is ${value}, it is a ${typeof value}`)
 }
}
const obj = Object.create(parentObj)
const proxy = new Proxy(obj, {
 get: function (target, property, receiver) {
  if (typeof target[property] !== 'string') {
   return target[property]
  } else {
   throw new TypeError(`The type of ${property} is String!`)
  }
 }
})
proxy.key = 100 
console.log(proxy.key)
// key is 100, it is a number
// The type of key is String!

如代碼所示，目標(biāo)對(duì)象obj繼承自parentObj，而parentObj中使用了getter方法，那么使用proxy的get方法仍舊會(huì)報(bào)錯(cuò)。實(shí)際運(yùn)用中原型鏈可能會(huì)很長(zhǎng)，getter可能會(huì)存在于原型鏈的任何一個(gè)地方中，所以在使用Proxy的get方法時(shí)請(qǐng)一定要注意。

但是如果把parentObj上的key遮蔽掉，就不會(huì)發(fā)生拋出錯(cuò)誤的情況了。比如在創(chuàng)建obj的時(shí)候申明的key，代碼如下：

const parentObj = {
 get key() {
  return 'string'
 },
 set key(value) {
  console.log(`key is ${value}, it is a ${typeof value}`)
 }
}
const obj = Object.create(parentObj, {
 key: {
  value: null,
  writable: true
 }
})
const proxy = new Proxy(obj, {
 get: function (target, property, receiver) {
  if (typeof target[property] !== 'string') {
   return target[property]
  } else {
   throw new TypeError(`The type of ${property} is String!`)
  }
 }
})
proxy.key = 100 
console.log(proxy.key)
// 100

同樣的，我們也可以使用Object.defineProperty()和Object.assign()這兩個(gè)方法來(lái)達(dá)到相同的目的：

Object.defineProperty(obj, 'key', {
 value: null,
 writable: true
})
obj = Object.assign({}, obj, { key: null })

但是要注意使用Object.assign()的時(shí)候不能這么些：

obj = Object.assign(obj, { key: null })

這樣寫(xiě)法無(wú)法遮蔽掉parentObj上的key屬性，使用的時(shí)候仍舊會(huì)拋出錯(cuò)誤。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論