1. 程式人生 > >ES6-----學習系列十七(Decorator)

ES6-----學習系列十七(Decorator)

col 修飾符 script hello fun only 概念 new ret

Decorator就是修飾器的意思

一、概念

  修飾器是一個函數,用來修改類的行為(註意: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)