首页 > 其他分享> 文章详细

es6 - Decorator

2022-08-01 15:02:11 阅读：147 来源： 互联网

标签：es6 mixins class foo 装饰 Decorator 属性

一、定义

Decorator，即装饰器，从名字上很容易让我们联想到装饰者模式：
- 简单来讲，装饰者模式就是一种在不改变原类和使用继承的情况下，动态地扩展对象功能的设计理论
ES6中Decorator功能亦如此，其本质也不是什么高大上的结构，就是一个普通的函数，用于扩展类属性和类方法：
- 代码可读性变强了，装饰器命名相当于一个注释
- 在不改变原有代码情况下，对原来功能进行扩展

二、用法

类的装饰：当对类本身进行装饰的时候，能够接受一个参数，即类本身
类属性的装饰：当对类属性进行装饰的时候，能够接受三个参数
- 类的原型对象
- 需要装饰的属性名
- 装饰属性名的描述对象
注意：装饰器不能用于修饰函数，因为函数存在变量声明情况

三、使用场景

基于Decorator强大的作用，我们能够完成各种场景的需求
使用react-redux的时候，如果写成下面这种形式，既不雅观也很麻烦：

class MyReactComponent extends React.Component {}

export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

通过装饰器就变得简洁多了：

@connect(mapStateToProps, mapDispatchToProps)

export default class MyReactComponent extends React.Component {}

将mixins，也可以写成装饰器，让使用更为简洁了：

function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list);
  };
}

// 使用
const Foo = {
  foo() { console.log('foo') }
};

@mixins(Foo)
class MyClass {}

let obj = new MyClass();
obj.foo() // "foo"

标签：es6,mixins,class,foo,装饰,Decorator,属性
来源： https://www.cnblogs.com/chloe56/p/16540286.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

es6 - Decorator