es7学习教程之Decorators(修饰器)详解

 更新时间:2017年07月21日 11:09:30   投稿:daisy  
这篇文章主要给大家介绍了关于es7中Decorators(修饰器)的相关资料,文中通过示例代码给大家介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。

本文主要给大家介绍的是关于es7 Decorators(修饰器)的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍:

ES6 Decorators(修饰器)

修饰器(Decorator)是一个函数,用来修改类的行为。这是ES7的一个提案,目前Babel转码器已经支持

我们在游戏大型项目种经常会用到的方法,现在es6直接支持

想要使用Decorator的话需要我们配置一下文件夹,配置一下环境

npm install babel-plugin-transform-decorators-legacy --save-dev

完事配置一下babelrc文件

"plugins": ["transform-decorators-legacy"]

先说一下装饰器的特点

装饰器本质是一个函数

@hometown hometown()

装饰对象可以使用多个装饰器

@hometown("山西")
@school
 class Student{
  constructor(name){
   this.name=name;
  }
  @studyke("HTML")
  study(){
   console.log(this.name+" is studying"+this.ke+"!")
  }
}

装饰器可以带参数

function hometown(diqu){
   //target.home="广灵";
   return function(target){
    target.home=diqu;
   }
  }

@hometown("山西")
class...

装饰器修饰 类

function school(target){
   console.log("123")
   target.schoolName="师徒课堂";
  }
  function hometown(diqu){
   //target.home="广灵";
   return function(target){
    target.home=diqu;
   }
  }

  function studyke(kemu){
   return function(target){
    target.ke=kemu;
   }
  }
  @hometown("山西")
  @school
  class Student{
   constructor(name){
    this.name=name;
   }
   @studyke("HTML")
   study(){
    console.log(this.name+" is studying"+this.ke+"!")
   }
  }
  console.log(Student.schoolName);
  console.log(Student.home);

  let l=new Student("xiaoA");
  l.study();

  @school
  function Teacher(){

  } 

总结

以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

相关文章

  • 利用JavaScript的Map提升性能的方法详解

    利用JavaScript的Map提升性能的方法详解

    这篇文章主要介绍了利用JavaScript的Map提升性能的方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • 深入浅析同源策略和跨域访问

    深入浅析同源策略和跨域访问

    同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现
    2015-11-11
  • layer.js open 隐藏滚动条的例子

    layer.js open 隐藏滚动条的例子

    今天小编就为大家分享一篇layer.js open 隐藏滚动条的例子,具有很好的参考价值,希望对大家有所帮助。 一起跟随小编过来看看吧
    2019-09-09
  • JS去除字符串中空格的方法

    JS去除字符串中空格的方法

    这篇文章主要介绍了JS去除字符串中空格的方法,涉及javascript字符串的正则、遍历、运算等相关操作技巧,需要的朋友可以参考下
    2017-02-02
  • 分享JavaScript的 3 种工厂模式的用法

    分享JavaScript的 3 种工厂模式的用法

    这篇文章主要分享JavaScript的 3 种工厂模式,工厂模式是设计模式中最常用的设计模式之一,这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式,下文关于工厂模式的更多相关资料需要的小伙伴可以参考一下
    2022-04-04
  • js判断浏览器类型及设备(移动页面开发)

    js判断浏览器类型及设备(移动页面开发)

    这篇文章主要介绍了js判断浏览器类型及设备(移动页面开发),需要的朋友可以参考下
    2015-07-07
  • javascript实现自动输出文本(打字特效)

    javascript实现自动输出文本(打字特效)

    文字如何实现打字的效果呢?在浏览网页的时候也经常能看到这种效果。本文给大家汇总介绍了几种打字效果的文字特效,文字一个一个地打印在页面上。
    2015-08-08
  • Javascript打印网页部分内容的脚本

    Javascript打印网页部分内容的脚本

    有时候我们只需要打印部分内容,因为现在的页面中广告和一些相关内容很多,所有用下面的方法,就可以了
    2008-11-11
  • JavaScript展开运算符和剩余运算符的区别详解

    JavaScript展开运算符和剩余运算符的区别详解

    本文主要介绍了JavaScript展开运算符和剩余运算符的区别详解,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • 微信小程序canvas实现环形渐变

    微信小程序canvas实现环形渐变

    这篇文章主要为大家详细介绍了微信小程序canvas实现环形渐变,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08

最新评论