js基石之---es7的decorator修饰器

es7的decorator修饰器

装饰器（Decorator）是一种与类（class）相关的语法，用来注释或修改类和类方法。

decorator就是给类添加或修改类的变量与方法的。

装饰器是一种函数，写成@ + 函数名。它可以放在类和类方法的定义前面。

例

@frozen class Foo {
  @configurable(false)
  @enumerable(true)
  method() {}

  @throttle(500)
  expensiveMethod() {}
}

上面代码一共使用了四个装饰器，一个用在类本身，另外三个用在类方法。它们不仅增加了代码的可读性，清晰地表达了意图，而且提供一种方便的手段，增加或修改类的功能。

1.修改类

@addType
class human{}
function addType(target){
  target.age=27;
  target.name=hyh;
  target.sex=male;
  target.hight=178;
  console.log('此对象被修改了')
}
console.log(new human())

上面代码中，@addType就是一个装饰器。它修改了human这个类的行为，为它加上了静态属性age name sex hight等等。addType函数的参数target是human类本身。

2.修改类的方法

class Dabao {
    @setAttr
    cxh(){
        return true
    } 
}
function setAttr(targt, name, decorator) {
    decorator.writable = false
    return 
}

var dabao = new Dabao;
console.log(dabao.cxh)
dabao.cxh = () => {
    return false
}
console.log(dabao.cxh)

3. 装饰器可接受多个传参，第一个参数为修饰target ,如果觉得一个参数不够用，可以在装饰器外面再封装一层函数。

装饰器testable可以接受参数，这就等于可以修改装饰器的行为。

function testable(isTestable) {
  return function(target) {
    target.isTestable = isTestable;
  }
}

@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true

@testable(false)
class MyClass {}
MyClass.isTestable // false

上面代码中，装饰器函数testable是在目标类的prototype对象上添加属性，因此就可以在实例上调用。

下面是另外一个例子。

// mixins.js
export function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list)
  }
}

// main.js
import { mixins } from './mixins'

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

@mixins(Foo)
class MyClass {}

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

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

class MyReactComponent extends React.Component {}

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

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

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

相对来说，后一种写法看上去更容易理解。

4.装饰器不能用于装饰函数

5.Mixin

在装饰器的基础上，可以实现Mixin模式。所谓Mixin模式，就是对象继承的一种替代方案，中文译为“混入”（mix in），意为在一个对象之中混入另外一个对象的方法。

请看下面的例子。

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

class MyClass {}

Object.assign(MyClass.prototype, Foo);

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

上面代码之中，对象Foo有一个foo方法，通过Object.assign方法，可以将foo方法“混入”MyClass类，导致MyClass的实例obj对象都具有foo方法。这就是“混入”模式的一个简单实现。

下面，我们部署一个通用脚本mixins.js，将 Mixin 写成一个装饰器。

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

然后，就可以使用上面这个装饰器，为类“混入”各种方法。

import { mixins } from './mixins';

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

@mixins(Foo)
class MyClass {}

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

来源：oschina

链接：https://my.oschina.net/u/4323284/blog/4274941

标签

react

Prototype

javascript

redux

frozen