本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。
怎么理解ES6中 Decorator 的?
【资料图】
Decorator,即装饰器,从名字上很容易让我们联想到装饰者模式
简单来讲,装饰者模式就是一种在不改变原类和使用继承的情况下,动态地扩展对象功能的设计理论。
ES6中Decorator功能亦如此,其本质也不是什么高大上的结构,就是一个普通的函数,用于扩展类属性和类方法
这里定义一个士兵,这时候他什么装备都没有
class soldier{ }
登录后复制
定义一个得到 AK 装备的函数,即装饰器
function strong(target){ target.AK = true}
登录后复制
使用该装饰器对士兵进行增强
@strongclass soldier{}
登录后复制
这时候士兵就有武器了
soldier.AK // true
登录后复制
上述代码虽然简单,但也能够清晰看到了使用Decorator(装饰器)两大优点:
代码可读性变强了,装饰器命名相当于一个注释
在不改变原有代码情况下,对原来功能进行扩展
装饰器的用法
Docorator修饰对象为下面两种:
类的装饰
类属性的装饰
类的装饰
当对类本身进行装饰的时候,能够接受一个参数,即类本身
将装饰器行为进行分解,大家能够有个更深入的了解
@decoratorclass A {}// 等同于class A {}A = decorator(A) || A;
登录后复制
下面@testable
就是一个装饰器,target就是传入的类,即MyTestableClass,实现了为类添加静态属性
@testableclass MyTestableClass { // ...}function testable(target) { target.isTestable = true;}MyTestableClass.isTestable // true
登录后复制
如果想要传递参数,可以在装饰器外层再封装一层函数
function testable(isTestable) { return function(target) { target.isTestable = isTestable; }}@testable(true)class MyTestableClass {}MyTestableClass.isTestable // true@testable(false)class MyClass {}MyClass.isTestable // false
登录后复制
类属性的装饰
当对类属性进行装饰的时候,能够接受三个参数:
类的原型对象
需要装饰的属性名
装饰属性名的描述对象
首先定义一个readonly装饰器
function readonly(target, name, descriptor){ descriptor.writable = false; // 将可写属性设为false return descriptor;}
登录后复制
使用readonly装饰类的name方法
class Person { @readonly name() { return `${this.first} ${this.last}` }}
登录后复制
相当于以下调用
readonly(Person.prototype, "name", descriptor);
登录后复制
如果一个方法有多个装饰器,就像洋葱一样,先从外到内进入,再由内到外执行
function dec(id){ console.log("evaluated", id); return (target, property, descriptor) =>console.log("executed", id);}class Example { @dec(1) @dec(2) method(){}}// evaluated 1// evaluated 2// executed 2// executed 1
登录后复制
外层装饰器@dec(1)先进入,但是内层装饰器@dec(2)先执行
注意
装饰器不能用于修饰函数,因为函数存在变量声明情况
var counter = 0;var add = function () { counter++;};@addfunction foo() {}
登录后复制
编译阶段,变成下面
var counter;var add;@addfunction foo() {}counter = 0;add = function () { counter++;};
登录后复制
意图是执行后counter等于 1,但是实际上结果是counter等于 0
装饰器的使用场景
基于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"
登录后复制
下面再讲讲core-decorators.js几个常见的装饰器
@antobind
autobind装饰器使得方法中的this对象,绑定原始对象
import { autobind } from "core-decorators";class Person { @autobind getPerson() { return this; }}let person = new Person();let getPerson = person.getPerson;getPerson() === person;// true
登录后复制
@readonly
readonly装饰器使得属性或方法不可写
import { readonly } from "core-decorators";class Meal { @readonly entree = "steak";}var dinner = new Meal();dinner.entree = "salmon";// Cannot assign to read only property "entree" of [object Object]
登录后复制
@deprecate
deprecate或deprecated装饰器在控制台显示一条警告,表示该方法将废除
import { deprecate } from "core-decorators";class Person { @deprecate facepalm() {} @deprecate("功能废除了") facepalmHard() {}}let person = new Person();person.facepalm();// DEPRECATION Person#facepalm: This function will be removed in future versions.person.facepalmHard();// DEPRECATION Person#facepalmHard: 功能废除了
登录后复制
【相关推荐:javascript视频教程、web前端】
以上就是es6 装饰器怎么理解的详细内容,更多请关注php中文网其它相关文章!