文享日志

ES6-修饰器

发表于2019年02月22日12:49:27

0条评论 110次阅读

首先放一段示例代码


@testable

class MyTestableClass {

  // ...

}


function testable(target) {

  target.isTestable = true;

}


MyTestableClass.isTestable // true

代码中@testable即为一个修饰器。可以看到,修饰器本质上是一个函数。


将类作为修饰器函数的参数传入到函数内部,在函数内部为类挂载了属性与方法。


除了在类上使用修饰器外,还可以在类内部属性上使用修饰器。示例如下:


class Person {

  @readonly

  name() { return `${this.first} ${this.last}` }

}

这个很好理解,表明Person类中的name属性是只读的。

那么readonly修饰器函数是怎样的呢?


function readonly(target, name, descriptor){

  // descriptor对象原来的值如下

  // {

  //   value: specifiedFunction,

  //   enumerable: false,

  //   configurable: true,

  //   writable: true

  // };

  descriptor.writable = false;

  return descriptor;

}


readonly(Person.prototype, 'name', descriptor);

当修饰器作用到类属性上时,实则将类原型作为对象传入到了修饰器函数内部,第二个参数即为作用的类属性名,第三个参数是该属性的一些默认属性。修改默认属性即可控制该类属性的一些行为(比如说是否可复写该方法等)。


修饰器的两种使用方法就是上面👆这些了。


注意,我们提到修饰器实则就是一个函数,所以,遇到React中的这种写法也就很好理解了


@connect(mapStateToProps, mapDispatchToProps)


function connect(mapStateToProps,mapDispatchToProps){

      return function(){}

}


👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广