ホームページ  >  記事  >  ウェブフロントエンド  >  ES6 の Decorator の詳細な紹介

ES6 の Decorator の詳細な紹介

零下一度
零下一度オリジナル
2017-06-24 14:44:521477ブラウズ

Decoratorとはデコレーターの意味です

1.概念

デコレーターとは、クラスの動作を変更するために使用される関数です(注:1.機能 2.動作の変更 3.クラスの操作)

1読み取り専用修飾子

{
  let readonly=function(target,name,descriptor){
    descriptor.writable=false;return descriptor
  };

  class Test{
    @readonly
    time(){      return '2017-03-11'}
  }

  let test=new Test();  // test.time=function(){
  //   console.log('reset time');
  // }; 将报错  如果修改的话
  console.log(test.time());
}

クラスの前で変更することもできます

{
  let typename=function(target,name,descriptor){
    target.myname='hello';
  }

  @typename
  class Test{

  }

  console.log('类修饰符',Test.myname);//hello  // 第三方库修饰器的js库:core-decorators; npm install core-decorators}

{
  let log=(type)=>{return function(target,name,descriptor){
      let src_method=descriptor.value;
      descriptor.value=(...arg)=>{
        src_method.apply(target,arg);
        console.info(`log ${type}`);
      }
    }
  }

  class AD{
    @log('show')
    show(){
      console.info('ad is show')
    }
    @log('click')
    click(){
      console.info('ad is click');
    }
  }

  let ad=new AD();
  ad.show();
  ad.click();
}

以上がES6 の Decorator の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。