Proxy 是代理的意思.

代理什么?

據(jù)我自己的簡(jiǎn)單測(cè)試,它代理了對(duì)象的 set & get 方法.

JavaScript作為一門編程語(yǔ)法,對(duì)屬性(或者說(shuō)是字段)沒(méi)有提供原生的 setter & getter 函數(shù).這些功能在其他的,類似于 Java,.Net,Objective-C里都有提供.

所以,proxy 更像是 JavaScript 提供的一個(gè)統(tǒng)一的屬性的getter & setter 的監(jiān)測(cè)接口.

Proxy 簡(jiǎn)單語(yǔ)法

Proxy 是一個(gè)構(gòu)造函數(shù),在調(diào)用的時(shí)候,將需要監(jiān)控的對(duì)象以及 監(jiān)控到了對(duì)象set|get 操作時(shí)該如何去做.

let obj = {
  id: 1,
  level:10,
  name: '李四'
}

現(xiàn)在有一個(gè)需求,如果 level = 10 ,需要在名字加上 vip 標(biāo)記.

那我們就不能直接輸出 obj.name 了,起碼要判斷一下,level === 10 ?

通常做法,我們是寫了一個(gè) hasVip() 的方法.

hasVip() {
    if (this.level === 10) {
      return this.name + ' vip'
    }
  }

使用 proxy.

let objProxy = new Proxy(obj, {
  get(obj, prop) {
    if (prop === 'name') {
      return obj.level === 10 ? obj.name + ' vip' : obj.name
    }
  }
})

利用一個(gè)Proxy 構(gòu)造函數(shù)把需要代理的 get & set 的對(duì)象包裝起來(lái).

然后我們?cè)谑褂么舜韺?duì)象 objProxy.name 直接輸出name 屬性即可.

console.log(objProxy.name)

李四 vip

當(dāng)然,set方法也是一樣,在設(shè)置屬性set的時(shí)候,也可以監(jiān)控.

// 第一個(gè)參數(shù),被代理的對(duì)象
  // 第二個(gè)參數(shù),set監(jiān)控到的屬性
  // 第三個(gè)參數(shù),set的值.
  set(obj, prop,value) {
    if (prop === 'id') {
      if (!Number.isNaN(value)) {
        console.log(`${prop} = ${value} 必須是數(shù)字!!!!`)
        return
      }
      
      obj.id = parseInt(value)
      console.log(obj.id)
    }
  }

objProxy.id = 'avcde'

id = avcde 必須是數(shù)字!!!!

總結(jié):

• 原生的js對(duì)象屬性,我們可以很輕松,甚至是無(wú)意識(shí)的寫 obj.name='xxxx' & let b = obj.name.這樣類似于其他語(yǔ)言中可以叫 getter & setter 的方法.
• js之前本身沒(méi)有提供一個(gè)比較好的 getter & setter 機(jī)制.
• 利用js新提供的 Proxy 構(gòu)造函數(shù)可以為一個(gè)對(duì)象在全局上提供一個(gè) get&set,用于監(jiān)控此對(duì)象身上所有的 屬性取值和賦值操作.
• 加了一層監(jiān)控之后,我們就可以根據(jù)自己的需求來(lái)做一些必要的事情了.