這篇文章將為大家詳細(xì)講解有關(guān)es7中修飾器Decorator怎么用，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

企業(yè)建站必須是能夠以充分展現(xiàn)企業(yè)形象為主要目的，是企業(yè)文化與產(chǎn)品對外擴(kuò)展宣傳的重要窗口，一個(gè)合格的網(wǎng)站不僅僅能為公司帶來巨大的互聯(lián)網(wǎng)上的收集和信息發(fā)布平臺，創(chuàng)新互聯(lián)公司面向各種領(lǐng)域：成都木包裝箱等成都網(wǎng)站設(shè)計(jì)、成都全網(wǎng)營銷推廣解決方案、網(wǎng)站設(shè)計(jì)等建站排名服務(wù)。

1. Decorator基本知識

在很多框架和庫中看到它的身影，尤其是React和Redux，還有mobx中，那什么是裝飾器呢。

修飾器（Decorator）是一個(gè)函數(shù)，用來修改類的行為。不是很理解這種抽象概念，還是看代碼講解實(shí)際些。

//定義一個(gè)函數(shù)，也就是定義一個(gè)Decorator，target參數(shù)就是傳進(jìn)來的Class。
//這里是為類添加了一個(gè)靜態(tài)屬性
function addAge(target) {
  target.age = 2;
}

//在Decorator后面跟著Class，Decorator是函數(shù)的話，怎么不是addAge(MyGeekjcProject)這樣寫呢？
//我只能這樣理解：因?yàn)檎Z法就這樣，只要Decorator后面是Class，默認(rèn)就已經(jīng)把Class當(dāng)成參數(shù)隱形傳進(jìn)Decorator了(就是所謂的語法糖)。
@addAge
class MyGeekjcProject {}

console.log(MyGeekjcProject.age) // 2

1.1 傳參修飾類

但上面這樣只傳了一個(gè)Class作為參數(shù)不夠靈活怎么辦？
我們可以在外層套一個(gè)函數(shù)，只要最后返回的是一個(gè)Decorator即可，管你套多少個(gè)函數(shù)傳多少個(gè)參數(shù)都無所謂。

function addAge(age) {
  return function(target) {
    target.age = age;
  }
}

//注意這里，隱形傳入了Class，語法類似于addAge(2)(MyGeekjcProject)
@testable(2)
class MyGeekjcProject {}
MyGeekjcProject.age // 2

@addAge(3)
class MyGeekjcProject {}
MyGeekjcProject.age // 3

1.2 修飾類的屬性

下面是修改類的prototype對象

function description(target) {
  target.prototype.url = 'https://www.geekjc.com';
}

@description
class MyGeekjcProject {}

let geekjc = new MyGeekjcProject();
geekjc.url // https://www.geekjc.com

概念大概理解了，修飾器不僅可以修飾類，還可以修飾類的屬性

//假如修飾類的屬性則傳入三個(gè)參數(shù)，對應(yīng)Object.defineProperty()里三個(gè)參數(shù)，具體不細(xì)說
//target為目標(biāo)對象，對應(yīng)為Class的實(shí)例
//name為所要修飾的屬性名，這里就是修飾器緊跟其后的name屬性
//descriptor為該屬性的描述對象
//這里的Decorator作用是使name屬性不可寫，并返回修改后的descriptor
function readonly(target, name, descriptor){
  descriptor.writable = false;
  return descriptor;
}

class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}

關(guān)于Object.defineProperty()可以看文章學(xué)習(xí)Object.defineProperty

再看一個(gè)復(fù)雜的例子

//定義一個(gè)Class并在其add上使用了修飾器
class Math {
  @log
  add(a, b) {
    return a + b;
  }
}

//定義一個(gè)修飾器
function log(target, name, descriptor) {
  //這里是緩存舊的方法，也就是上面那個(gè)add()原始方法
  var oldValue = descriptor.value;

  //這里修改了方法，使其作用變成一個(gè)打印函數(shù)
  //最后依舊返回舊的方法，真是巧妙
  descriptor.value = function() {
    console.log(`Calling "${name}" with`, arguments);
    return oldValue.apply(null, arguments);
  };

  return descriptor;
}

const math = new Math();
math.add(2, 4);

看完上面的代碼就知道decorator有什么用了，修飾器不僅可以修飾類的行為，還可以修飾類的屬性。

2. react高階組件

更通俗地描述為，高階組件通過包裹（wrapped）被傳入的React組件，經(jīng)過一系列處理，最終返回一個(gè)相對增強(qiáng)（enhanced）的React組件，供其他組件調(diào)用。

3. 實(shí)現(xiàn)一個(gè)高階組件

面我們來實(shí)現(xiàn)一個(gè)最簡單的高階組件（函數(shù)），它接受一個(gè)React組件，包裹后然后返回。

export default function withDescription(WrappedComponent) {
  return class HOC extends Component {
    render() {
      return 

        
          極客教程(https://www.geekjc.com)致力于推廣各種編程語言技術(shù)，也為了未來數(shù)字化世界，讓人更容易找到操作數(shù)字化的方式，為了未來而生的編程學(xué)習(xí)平臺，
          大部分資源是完全免費(fèi)的，并且會根據(jù)當(dāng)前互聯(lián)網(wǎng)的變化實(shí)時(shí)更新本站內(nèi)容。