其他分享
首页 > 其他分享> > es6 - Decorator

es6 - Decorator

作者:互联网

一、定义

  1. Decorator,即装饰器,从名字上很容易让我们联想到装饰者模式:

    • 简单来讲,装饰者模式就是一种在不改变原类和使用继承的情况下,动态地扩展对象功能的设计理论
  2. ES6中Decorator功能亦如此,其本质也不是什么高大上的结构,就是一个普通的函数,用于扩展类属性和类方法:

    • 代码可读性变强了,装饰器命名相当于一个注释

    • 在不改变原有代码情况下,对原来功能进行扩展

二、用法

  1. 类的装饰:当对类本身进行装饰的时候,能够接受一个参数,即类本身

  2. 类属性的装饰:当对类属性进行装饰的时候,能够接受三个参数

    • 类的原型对象

    • 需要装饰的属性名

    • 装饰属性名的描述对象

  3. 注意:装饰器不能用于修饰函数,因为函数存在变量声明情况

三、使用场景

  1. 基于Decorator强大的作用,我们能够完成各种场景的需求

  2. 使用react-redux的时候,如果写成下面这种形式,既不雅观也很麻烦:

class MyReactComponent extends React.Component {}
​
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);
  1. 通过装饰器就变得简洁多了:
@connect(mapStateToProps, mapDispatchToProps)

export default class MyReactComponent extends React.Component {}
  1. 将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