> 웹 프론트엔드 > JS 튜토리얼 > ES6의 Decorator에 대한 자세한 소개

ES6의 Decorator에 대한 자세한 소개

零下一度
풀어 주다: 2017-06-24 14:44:52
원래의
1563명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿