• 技术文章 >web前端 >前端问答

    es6 装饰器怎么理解

    青灯夜游青灯夜游2023-01-04 09:14:13原创135

    在es6中,装饰者模式是一种在不改变原类和使用继承的情况下,动态地扩展对象功能的设计理论;装饰者其本质就是一个普通的函数,用于扩展类属性和类方法。使用装饰器的优点:1、代码可读性变强了,装饰器命名相当于一个注释;2、在不改变原有代码情况下,对原来功能进行扩展。

    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

    怎么理解ES6中 Decorator 的?

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

    简单来讲,装饰者模式就是一种在不改变原类和使用继承的情况下,动态地扩展对象功能的设计理论。

    ES6中Decorator功能亦如此,其本质也不是什么高大上的结构,就是一个普通的函数,用于扩展类属性和类方法

    这里定义一个士兵,这时候他什么装备都没有

    class soldier{ 
    }

    定义一个得到 AK 装备的函数,即装饰器

    function strong(target){
        target.AK = true
    }

    使用该装饰器对士兵进行增强

    @strong
    class soldier{
    }

    这时候士兵就有武器了

    soldier.AK // true

    上述代码虽然简单,但也能够清晰看到了使用Decorator(装饰器)两大优点:

    装饰器的用法

    Docorator修饰对象为下面两种:

    类的装饰

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

    将装饰器行为进行分解,大家能够有个更深入的了解

    @decorator
    class A {}
    
    // 等同于
    
    class A {}
    A = decorator(A) || A;

    下面@testable就是一个装饰器,target就是传入的类,即MyTestableClass,实现了为类添加静态属性

    @testable
    class 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++;
    };
    
    @add
    function foo() {
    }

    编译阶段,变成下面

    var counter;
    var add;
    
    @add
    function 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中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:装饰器 ES6
    上一篇:node  import报错怎么办 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • es6怎么将类数组对象转数组• es6怎么删除数组中的相同元素• es6怎么查找某项是否存在• es6怎么去除字符串前后空格• es6暂时性死区是什么意思
    1/1

    PHP中文网