反射：Reflect

反射到底是個什么東西？

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

為什要叫做反射？

因為它能做的事情，和其他語言（Java、python等）中的反射很相似。其他語言中都叫做反射了，那就共鳴（降低學(xué)習(xí)成本？）

反射能做什么事情呢？

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

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

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

怎么說？

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

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

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

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

代理：Proxy

代理到底是個什么東西？

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

ES6中的代理也是這個意思，我們可以去代理一個對象類型的數(shù)據(jù)（函數(shù)、對象等），然后我們再去訪問對象時，訪問代理就好了。

為啥我們要訪問代理？

因為代理對象給我們提供了修改底層實現(xiàn)的方式，也就是說我們可以在代理對象上進(jìn)行一些操作，為我們訪問對象制定一些規(guī)則。就像代理服務(wù)器可以過濾某些對服務(wù)器的訪問等功能。

怎么操作？

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

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

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

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

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

應(yīng)用：

比如：

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

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

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

封裝一下，搞一個通用類型出來

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

然后：

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

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

是不是很有趣呢大家。

總結(jié)

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

最新評論