es7学习教程之Decorators（修饰器）详解

2024-10-20 13:49:38

本文主要给大家介绍的是关于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(){

  }

总结

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

es7学习教程之fetch解决异步嵌套问题的方法示例

本文主要给大家介绍的是关于fetch API解决异步嵌套问题,下面话不多说,来一起看看详细的介绍: 我们之前学习了async和await,知道他是为了解决浏览器异步获取的的!但是我们用fetch api的话方法会更加的简单 async和await解决异步嵌套 function ajax(url){ return new Promise(function(reslove,reject){ let xmlHttp=new XMLHttpRequest(); xmlHttp.open("get&quo
Javascript es7中比较实用的两个方法示例

本文主要跟大家介绍了关于es7中两个比较实用的方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 一..operator (求幂运算符)** console.log(2**3);//8 console.log(4**4);//256 //以往的写法 console.log(Math.pow(2,3));//8 console.log(Math.pow(4,4));//256 还不是很简单,两个*号就能进行求幂运算 1.Array.prototype.includes es6为字符
Angular4学习教程之DOM属性绑定详解

前言 DOM 元素触发的一些事件通过 DOM 层级结构传播,事件首先由最内层的元素开始,然后传播到外部元素,直到它们到根元素,这种传播过程称为事件冒泡.本文主要介绍了关于Angular4 DOM属性绑定的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 简介使用插值表达式将一个表达式的值显示在模版上 <img src="{{imgUrl}}" alt=""> <h1>{{productTitle}}</h1&
es7学习教程之Decorators（修饰器）详解

本文主要给大家介绍的是关于es7 Decorators(修饰器)的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: ES6 Decorators(修饰器) 修饰器(Decorator)是一个函数,用来修改类的行为.这是ES7的一个提案,目前Babel转码器已经支持我们在游戏大型项目种经常会用到的方法,现在es6直接支持想要使用Decorator的话需要我们配置一下文件夹,配置一下环境 npm install babel-plugin-transform-decorato
Angular2学习教程之TemplateRef和ViewContainerRef详解

TemplateRef 在介绍 TemplateRef 前,我们先来了解一下 HTML 模板元素 - <template> .模板元素是一种机制,允许包含加载页面时不渲染,但又可以随后通过 JavaScript 进行实例化的客户端内容.我们可以将模板视作为存储在页面上稍后使用的一小段内容. 在 HTML5 标准引入 template 模板元素之前,我们都是使用 <script> 标签进行客户端模板的定义,具体如下: <script id="tpl-mock"
spring cloud学习教程之config修改配置详解

之前我们讲过了spring cloud之config配置的相关内容,那么在Git端修改配置后如何让客户端生效?下面来一起看看详细的介绍吧. 访问接口修改 refresh post方式执行http://localhost/refresh 会刷新env中的配置 restart 如果配置信息已经注入到bean中,由于bean是单例的,不会去加载修改后的配置需要通过post方式去执行http://localhost/restart, 需要通过application.properties中配置endpo
iOS学习教程之UIView中坐标转换详解

本文主要介绍的是关于iOS UIView坐标转换的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 在开发中我们经常会需要判断两个控件是否包含重叠,此时如果控件A和B的坐标原点如果不确定的话,那么肯定会导致比较不正确发生错误判断包含重叠的代码如下: CGRectContainsRect(<#CGRect rect1#>, <#CGRect rect2#>) CGRectContainsPoint(<#CGRect rect#>, <#CGPoint
webpack学习教程之publicPath路径问题详解

本文主要给大家介绍了关于webpack中publicPath路径问题的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: output: { filename: "[name].js", path:path.resolve(__dirname,"build") } 如果没有指定pubicPath,则引入路径如下 <body> <script src="b.js"></script> </body&g
spring学习教程之@ModelAttribute注解运用详解

本文主要给大家介绍了关于java中@ModelAttribute使用的相关资料,分享出来供大家参考学习,下面来一起看看详细的介绍: 一.@ModelAttribute注释方法例子(1),(2),(3)类似,被@ModelAttribute注释的方法会在此controller每个方法执行前被执行,因此对于一个controller映射多个URL的用法来说,要谨慎使用. (1)@ModelAttribute注释void返回值的方法 @Controller public class HelloWor
JavaWeb学习过程之MVC查询模式详解

一.首先先了解一下什么是mvc? MVC是Model-View-Controller的简称,即模型-视图-控制器.它是一种设计模式,它吧应用程序分成三个核心模块,模型,视图,控制器.他们各自处理自己的任务. 模型:是应用程序的主体部分,模型指的是业务模型. 一个模型可以为多个视图提供数据. 视图:是用户看到的并与之交互的界面. 可以向用户显示相关的数据,接受用户的输入,但是它不进行任何实际的业务处理. 控制器:接受用户的输入并调用模型和视图,完成用户的需求. 流程: 客户端发送请求到服务器,
IDEA教程之Activiti插件图文详解

本文作者:Spring_ZYL 文章来源:https://blog.csdn.net/gozhuyinglong 版权声明:本文版权归作者所有,转载请注明出处一.安装Activiti插件 1.搜索插件点击菜单[File]-->[Settings...]打开[Settings]窗口. 点击左侧[Plugins]按钮,在右侧输出＂actiBPM＂,点击下面的[Search in repositories]链接会打开[Browse Repositories]窗口. 2.开始安装进入[Browse
Zend Framework教程之Zend_Controller_Plugin插件用法详解

本文实例讲述了Zend Framework教程之Zend_Controller_Plugin插件用法.分享给大家供大家参考,具体如下: 通过Zend_Controller_Plugin可以向前端控制器增加附加的功能.便于w一些特殊功能.以下是Zend_Controller_Plugin的简单介绍. Zend_Controller_Plugin的基本实现 ├── Plugin │ ├── Abstract.php │ ├── ActionStack.php │ ├── Broker.p

es7学习教程之Decorators（修饰器）详解

相关推荐

随机推荐