返回顶部
首页 > 资讯 > 前端开发 > html >es6中装饰器怎么实现
  • 609
分享到

es6中装饰器怎么实现

2024-04-02 19:04:59 609人浏览 八月长安
摘要

这篇文章主要介绍“es6中装饰器怎么实现”,在日常操作中,相信很多人在es6中装饰器怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”es6中装饰器怎么实现”的疑惑有所帮

这篇文章主要介绍“es6中装饰器怎么实现”,在日常操作中,相信很多人在es6中装饰器怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”es6中装饰器怎么实现”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

在es6中,装饰器(Decorator)是一种与类(class)相关的语法,用来注释或修改类和类方法;装饰器其实就是一个编译时执行的函数,语法“@函数名”,通常放在类和类方法的定义前面。装饰器有两种:类装饰器和类方法装饰器。

教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构。这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装。

这种模式创建了一个装饰类,用来包装原有的类,并在保持类方法签名完整性的前提下,提供了额外的功能。

ES6 装饰器

在 ES6 中,装饰器(Decorator)是一种与类相关的语法,用来注释或修改类和类方法。

装饰器其实就是一个函数,通常放在类和类方法的前面。

装饰器对类的行为的改变,是代码编译时发生的,而不是在运行时;装饰器的本质就是编译时执行的函数

装饰器可以用来装饰整个类

@decorateClass
class Example {
    @decorateMethods
    method(){}
}

在上面的代码中使用了两个装饰器,其中 @decorateClass() 装饰器用在类本身,用于增加或修改类的功能;@decorateMethods() 装饰器用在类的方法,用于注释或修改类方法。

两种类型装饰器

装饰器只能用于类和类的方法,不能用于函数,因为存在函数提升。

装饰器只能用于类和类的方法,下面我们分别看下两种类型的装饰器的使用

1、类装饰器

类装饰器用来装饰整个类

类装饰器的参数

target: 类本身,也相当于是 类的构造函数:Class.prototype.constructor。

@decorateClass
class Example {
    //...
}

function decorateClass(target) {
    target.isTestClass = true
}

如上面代码中,装饰器 @decorateClass 修改了 Example 整个类的行为,为 Example 类添加了静态属性 isTestClass。装饰器就是一个函数,decorateClass 函数中的参数 target 就是 Example 类本身,也相当于是类的构造函数 Example.prototype.constructor.

装饰器传参

上面实现的装饰器在使用时是不能传入参数的,如果想要在使用装饰器是传入参数,可以在装饰器外面再封装一层函数

@decorateClass(true)
class Example {
    //...
}

function decorateClass(isTestClass) {
    return function(target) {
  target.isTestClass = isTestClass
  }
}

上面代码中实现的装饰器在使用时可以传递参数,这样就可以根据不同的场景来修改装饰器的行为。

实际开发中,React 与 Redux 库结合使用时,常常需要写成下面这样。

class MyReactComponent extends React.Component {}
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

有了装饰器,就可以改写上面的代码。

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}

2、类方法装饰器

类方法装饰器用来装饰类的方法

类方法装饰器的参数

  • target:

  • 装饰器修饰的类方法是静态方法:target 为类的构造函数

  • 装饰器修饰的类方法是实例方法:target 为类的原型对象

  • method:被修饰的类方法的名称

  • descriptor:被修饰成员的属性描述符

// descriptor对象原来的值如下
{
  value: specifiedFunction,
  enumerable: false,
  configurable: true,
  writable: true
};
class Example {
    @log
    instanceMethod() { }

    @log
    static staticMethod() { }
}

function log(target, methodName, descriptor) {
  const oldValue = descriptor.value;

  descriptor.value = function() {
    console.log(`Calling ${name} with`, arguments);
    return oldValue.apply(this, arguments);
  };

  return descriptor;
}

如上面代码中,装饰器 @log 分别装饰了实例方法 instanceMethod 和 静态方法 staticMethod。@log 装饰器的作用是在执行原始的操作之前,执行 console.log 来输出日志

类方法装饰器传参

上面实现的装饰器在使用时是不能传入参数的,如果想要在使用装饰器是传入参数,可以在装饰器外面再封装一层函数

class Example {
    @log(1)
    instanceMethod() { }

    @log(2)
    static staticMethod() { }
}

function log(id) {
    return (target, methodName, descriptor) => {
    const oldValue = descriptor.value;

    descriptor.value = function() {
      console.log(`Calling ${name} with`, arguments, `this id is ${id}`);
      return oldValue.apply(this, arguments);
    };

    return descriptor;
  }
}

上面代码中实现的装饰器在使用时可以传递参数,这样就可以根据不同的场景来修改装饰器的行为。

类装饰器与类方法装饰器的执行顺序

如果在一个类中,同时使用装饰器修饰类和类的方法,那么装饰器的执行顺序是:先执行类方法的装饰器,再执行类装饰器。

如果同一个类或同一个类方法有多个装饰器,会像剥洋葱一样,先从外到内进入,然后由内到外执行。

// 类装饰器
function decoratorClass(id){
    console.log('decoratorClass evaluated', id);

    return (target) => {
        // target 类的构造函数
        console.log('target 类的构造函数:',target)
        console.log('decoratorClass executed', id);
    }
}
// 方法装饰器
function decoratORMethods(id){
    console.log('decoratorMethods evaluated', id);
    return (target, property, descriptor) => {
        // target 代表

        // process.nextTick((() => {
            target.abc = 123
            console.log('method target',target)
        // }))
        console.log('decoratorMethods executed', id);

    }
}

@decoratorClass(1)
@decoratorClass(2)
class Example {
    @decoratorMethods(1)
    @decoratorMethods(2)
    method(){}
}


// decoratorMethods evaluated 1
// decoratorMethods evaluated 2
// method target Example { abc: 123 }
// decoratorMethods executed 2
// method target Example { abc: 123 }
// decoratorMethods executed 1
// decoratorClass evaluated 1
// decoratorClass evaluated 2
// target 类的构造函数: [Function: Example]
// decoratorClass executed 2
// target 类的构造函数: [Function: Example]
// decoratorClass executed 1

如上面代码中,会先执行类方法的装饰器 @decoratorMethods(1) 和 @decoratorMethods(2),执行完后再执行类装饰器 @decoratorClass(1) 和 @decoratorClass(2)

上面代码中的类方法装饰器中,外层装饰器 @decoratorMethods(1) 先进入,但是内层装饰器 @decoratorMethods(2) 先执行。类装饰器同理。

利用装饰器实现aop切面编程

function log(target, name, descriptor) {
    var oldValue = descriptor.value;

    descriptor.value = function () {
        console.log(`Calling "${name}" with`, arguments);
        return oldValue.apply(null, arguments);
    }
    return descriptor;
}

// 日志应用
class Maths {
    @log
    add(a, b) {
        return a + b;
    }
}
const math = new Maths();
// passed parameters should get logged now
math.add(2, 4);

到此,关于“es6中装饰器怎么实现”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: es6中装饰器怎么实现

本文链接: https://www.lsjlt.com/news/95547.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • es6中装饰器怎么实现
    这篇文章主要介绍“es6中装饰器怎么实现”,在日常操作中,相信很多人在es6中装饰器怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”es6中装饰器怎么实现”的疑惑有所帮...
    99+
    2024-04-02
  • es6 装饰器怎么理解
    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。怎么理解ES6中 Decorator 的?Decorator,即装饰器,从名字上很容易让我们联想到装饰者模式简单来讲,装饰者模式就是一种在不改变原类和使用...
    99+
    2023-05-14
    装饰器 ES6
  • Python装饰器与类的装饰器怎么实现
    这篇“Python装饰器与类的装饰器怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Python装饰器与类的装饰器怎么...
    99+
    2023-06-29
  • Python装饰器怎么实现
    这篇文章主要介绍“Python装饰器怎么实现”,在日常操作中,相信很多人在Python装饰器怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Python装饰器怎么实现”的疑惑有所帮助!接下来,请跟着小编...
    99+
    2023-06-17
  • Python怎么实现装饰器
    小编给大家分享一下Python怎么实现装饰器,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!普通装饰器:直接上代码吧。def demo(func_test...
    99+
    2023-06-25
  • es6装饰器有哪些
    这篇“es6装饰器有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“es6装饰器有哪些”...
    99+
    2024-04-02
  • es6装饰器是什么及怎么使用
    本篇内容介绍了“es6装饰器是什么及怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在es6中,装饰者模式是一种在不改变原类和使用继承...
    99+
    2023-07-04
  • es6装饰器的作用是什么
    这篇文章主要介绍“es6装饰器的作用是什么”,在日常操作中,相信很多人在es6装饰器的作用是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”es6装饰器的作用是什么”的疑惑...
    99+
    2024-04-02
  • Python装饰器怎么用代码实现
    这篇“Python装饰器怎么用代码实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Python装饰器怎么用代码实现”文章吧...
    99+
    2023-06-17
  • Python中怎么使用装饰器装饰函数
    这篇文章将为大家详细讲解有关Python中怎么使用装饰器装饰函数,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。***个函数deco是装饰函数,它的参数就是被装饰的函数对象。我们可以在deco...
    99+
    2023-06-17
  • Python装饰器是什么及怎么实现
    本篇内容介绍了“Python装饰器是什么及怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!装饰器介绍...
    99+
    2024-04-02
  • Vue项目之ES6装饰器在项目实战中的应用
    目录前言装饰模式(Decorator)ES6 装饰器装饰器应用ValidateCatchErrorConfirmation总结参考前言 在面向对象(OOP)的设计模式中,装饰器的应用...
    99+
    2024-04-02
  • Python中怎么使用装饰器来装饰函数
    在Python中,装饰器是一种函数,它接受一个函数作为参数,并返回一个新的函数。通过使用装饰器,可以在不修改原始函数代码的情况下添加...
    99+
    2024-03-12
    Python
  • Python怎么实现类装饰器及应用
    本篇内容主要讲解“Python怎么实现类装饰器及应用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Python怎么实现类装饰器及应用”吧!示例Python中的装饰器既可以是函数也可以是类。在前几...
    99+
    2023-07-06
  • C#实现装饰器模式
    场景:假设每次我们去超市购物,我们都会推一个购物车,有水果、蔬菜、肉类三种商品,提供给我们选择,那么这时候,如果使用装饰器模式,应该如何实现? 1.什么是装饰器模式 首先我们知道,如...
    99+
    2024-04-02
  • Python中怎么使用装饰器实现函数的缓存
    这篇文章主要介绍“Python中怎么使用装饰器实现函数的缓存”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Python中怎么使用装饰器实现函数的缓存”文章能帮助大家解决问题。装饰器模式在以下场景中被...
    99+
    2023-07-05
  • python中装饰器怎么使用
    这篇文章给大家分享的是有关python中装饰器怎么使用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、装饰器使用场景经常用于有切面需求的场景,比如:插入日志、性能测试、事务处理、缓存、权限校验等场景。装饰器是解...
    99+
    2023-06-15
  • python中@property装饰器怎么用
    这篇文章主要介绍python中@property装饰器怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、property的装饰器用法先简单上个小栗子说明:class property(fget=None,fse...
    99+
    2023-06-29
  • Vue中怎么使用装饰器
    本篇内容介绍了“Vue中怎么使用装饰器”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!什么是装饰器?Decorator是ES7的一个新语法。D...
    99+
    2023-06-28
  • es6 修饰器是干什么用
    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。修饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构。这种类型的设计模式属于结构型模式,它是作为现有的类的...
    99+
    2023-05-14
    修饰器 javascript ES6
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作