反射：Reflect

反射到底是個(gè)什么東西？

它的本質(zhì)就是一個(gè)對(duì)象（JS內(nèi)置的），里邊有一些函數(shù)可供調(diào)用。

為什要叫做反射？

因?yàn)樗茏龅氖虑?，和其他語(yǔ)言（Java、python等）中的反射很相似。其他語(yǔ)言中都叫做反射了，那就共鳴（降低學(xué)習(xí)成本？）

反射能做什么事情呢？

let animal = {
 name: "dog",
 age: 3
}
Reflect.get(animal, "name") // 傳參為：對(duì)象, 屬性名
// 等同于：
animal.name 

let say = function (type, sound) {
 console.log(`${type}的叫聲是${sound}`)
}
Reflect.apply(say, null, ["貓", "喵喵"]) // 傳參為：函數(shù), this指向, 實(shí)參列表
// 等同于：
say("貓", "喵喵")

經(jīng)過(guò)以上代碼我們深刻的發(fā)現(xiàn)Reflect好像沒(méi)什么用，非要說(shuō)些什么的話(huà)，他把我們以前的基本操作（比如：obj.name）用調(diào)用函數(shù)的方式實(shí)現(xiàn)了一遍。對(duì)了這就是它的意義：減少JS語(yǔ)言魔法，讓代碼更加純粹。

怎么說(shuō)？

JS語(yǔ)言魔法：我們的操作看起來(lái)不太合理，超乎尋常，難以解釋。

解釋一波，Reflect.get(animal, "name")你看著個(gè)代碼它又寬又長(zhǎng)，看著好像我們要得到 animal 這個(gè)對(duì)象中 name 這個(gè)屬性的值的意思。

再看看animal.name 震驚！只需要這樣，就得到了對(duì)象中的屬性的值，雖然學(xué)習(xí)過(guò)JS的伙伴們覺(jué)得很正常，但是我們不太能用語(yǔ)言去描述這段代碼做了什么，這就是語(yǔ)言魔法的意思。

想必大家已經(jīng)對(duì)反射有一定了解了，Reflect對(duì)象上還有一些其他方法。大家可以看文檔研究一下怎么用，

代理：Proxy

代理到底是個(gè)什么東西？

我們都聽(tīng)過(guò)什么代理商、還有代理服務(wù)器之類(lèi)的。比如哪代理服務(wù)器來(lái)說(shuō)，我們不能直接訪(fǎng)問(wèn)到服務(wù)器，我們必須要去訪(fǎng)問(wèn)代理服務(wù)器，由代理服務(wù)器代替我們?nèi)ピL(fǎng)問(wèn)服務(wù)器，服務(wù)器返回的數(shù)據(jù)，也要先返回給代理服務(wù)器，再由代理服務(wù)器返回給我們。

ES6中的代理也是這個(gè)意思，我們可以去代理一個(gè)對(duì)象類(lèi)型的數(shù)據(jù)（函數(shù)、對(duì)象等），然后我們?cè)偃ピL(fǎng)問(wèn)對(duì)象時(shí)，訪(fǎng)問(wèn)代理就好了。

為啥我們要訪(fǎng)問(wèn)代理？

因?yàn)榇韺?duì)象給我們提供了修改底層實(shí)現(xiàn)的方式，也就是說(shuō)我們可以在代理對(duì)象上進(jìn)行一些操作，為我們?cè)L問(wèn)對(duì)象制定一些規(guī)則。就像代理服務(wù)器可以過(guò)濾某些對(duì)服務(wù)器的訪(fǎng)問(wèn)等功能。

怎么操作？

Proxy的本質(zhì)是一個(gè)構(gòu)造函數(shù)，

new Proxy(obj, {
 // 一些規(guī)則
})

這樣我們就構(gòu)造出了一個(gè)obj對(duì)象的一個(gè)代理對(duì)象，第二個(gè)參數(shù)是一個(gè)對(duì)象它為訪(fǎng)問(wèn)obj對(duì)象制定了一些規(guī)章制度。

new Proxy(obj, {
 get(target, prop){
  // some code
  return Reflect.get(target, prop)
 }
})

這就是在創(chuàng)建代理對(duì)象是制定規(guī)則的場(chǎng)景，對(duì)比一下Reflect，是不是很想呢。確實(shí)反射經(jīng)常配合Proxy使用

應(yīng)用：

比如：

function sum(num1, num2){
 return num1 + num2;
}

現(xiàn)在我們?yōu)閟um函數(shù)的傳參制定一些規(guī)則：參數(shù)必需是number類(lèi)型的

const sunProxy = new Proxy(sum, {
 apply(target, thisArgument, arguments) {
  arguments.forEach(item => {
   typeof item !== "number" && throw("參數(shù)類(lèi)型非number")
  })
  return Reflect.apply(target, thisArgument, arguments)
 }
})
sunProxy(23, 32)

封裝一下，搞一個(gè)通用類(lèi)型出來(lái)

function funcProxy(func, ...types) 
 //執(zhí)行完這個(gè)函數(shù)返回一個(gè)函數(shù)的代理，剩余參數(shù)是我們規(guī)定的傳參類(lèi)型
  return new Proxy(func, {
  apply(target, thisArgument, argumentsList) {
   types.forEach((type, index) => {
   // 循環(huán)判斷每一項(xiàng)參數(shù)類(lèi)型是否合法
    typeof argumentsList[index] !== type && throw("傳參類(lèi)型不符合")
      }
     })
   return Reflect.apply(target, thisArgument, argumentsList);
    }
   })
  }

然后：

const sumProxy = funcProxy(sum, "number", "number")
sumProxy(3, 5);

使用反射我們可以實(shí)現(xiàn)一些底層操作，代理可以為我們的調(diào)用制定規(guī)則。

是不是很有趣呢大家。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論