ES7 Decorators（修饰器）

张汉庆发布于2019-08-20 18:11 / 2831人阅读

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="xx";
            return function(target){
               target.home=diqu;
            }
        }
@hometown("山西")
class...

装饰器修饰类

</>复制代码 
function school(target){
            console.log("123")
            target.schoolName="xxxx";
        }
        function hometown(diqu){
            //target.home="xx";
            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(){
        }

云服务器 GPU云服务器修饰器 Python修饰器 python类修饰器 decorators

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84169.html

在 Web 应用中使用 ES7 装饰器（Decorator）初体验

摘要：前言今天闲来时看了看中的新标准之一，装饰器。过程中忽觉它和中的注解有一些类似之处，并且当前版本的中已经支持它了，所以，就动手在一个应用中尝鲜初体验了一番。另外，由于装饰器目前还是中的一个提案，其中具体细节可能还会更改。前言今天闲来时看了看ES7中的新标准之一，装饰器（Decorator）。过程中忽觉它和Java中的注解有一些类似之处，并且当前版本的TypeScript中已经支持它了...

ivan_qhz 2019-08-19 17:27 评论0 收藏0
从装饰模式到装饰器

摘要：从装饰模式到装饰器装饰模式装饰模式的作用是在不修改原有的接口的情况下，让类表现的更好。它是一个语法糖说完了装饰模式，我们再看一下在中最新引入的装饰器。从装饰模式到装饰器装饰模式装饰模式的作用是：在不修改原有的接口的情况下，让类表现的更好。什么叫更好？为什么需要装饰模式自然是继承有一些问题继承会导致超类和子类之间存在强耦合性，当超类改变时，子类也会随之改变；超类的内...

monw3c 2019-08-21 18:23 评论0 收藏0
【用故事解读 MobX 源码（四）】装饰器和 Enhancer

摘要：所以这是一篇插队的文章，用于去理解中的装饰器和概念。因此，该的作用就是根据入参返回具体的描述符。其次局部来看，装饰器具体应用表达式是，其函数签名和是一模一样。等装饰器语法，是和直接使用是等效等价的。 ================前言=================== 初衷：以系列故事的方式展现 MobX 源码逻辑，尽可能以易懂的方式讲解源码；本系列文章：《【用故事解...

maybe_009 2019-08-22 18:30 评论0 收藏0
react系列-bind this

摘要：幸运的是，已经提供了对这个新语法的支持。而且函数绑定语法属于草案中的特性，尚未纳入标准。方案和方案会增加代码量方案需要引入第三方库，不过提供了很多使用的装饰器。常用的方案是方案和方案删除箭头函数删除问题对于大多数前端开发来说，JavaScript 的 this 关键字会造成诸多困扰，由于 JavaScript 代码中的 this 指向并不清晰。在写react应用时，也会也到很多作...

XGBCCC 2019-08-21 14:38 评论0 收藏0
修饰器模式

摘要：更多前端技术和知识点，搜索订阅号菌订阅不会改变原有的对象，而是在其基础上进行拓展。 showImg(https://segmentfault.com/img/remote/1460000019865720?w=640&h=645); ⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌订阅不会改变原有的对象，而是在其基础上进行拓展。实现原理创建一个 A 类 A 类中的属性和方法使...

Salamander 2019-08-26 10:20 评论0 收藏0