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


Posted in Javascript onJuly 21, 2017

本文主要给大家介绍的是关于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 相关文章推荐
JavaScript 闭包深入理解(closure)
May 27 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
vuejs指令详解
Feb 07 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
node文件批量重命名的方法示例
Oct 23 Javascript
Angular 数据请求的实现方法
May 07 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
VUE中使用Vue-resource完成交互
Jul 21 #Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 #Javascript
js图片轮播插件的封装
Jul 21 #Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 #Javascript
AngularJS中使用three.js的实例详解
Jul 21 #Javascript
Axios学习笔记之使用方法教程
Jul 21 #Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 #Javascript
You might like
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python查询mysql中文乱码问题
2014/11/09 Python
Python导入txt数据到mysql的方法
2015/04/08 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
德国机车企业:FC-Moto
2017/10/27 全球购物
大学生自我评价怎样写好
2013/10/23 职场文书
英语自荐信范文
2013/12/11 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
旷工检讨书1000字
2015/01/01 职场文书
公司承诺函范文
2015/01/21 职场文书
企业百日安全活动总结
2015/05/07 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
学习nginx基础知识
2021/09/04 Servers