装饰器 — 装饰器修饰类中的方法

最后更新于:2022-04-02 08:10:38

[TOC] >[success] # 将装饰器作用在类的方法上 ~~~ 1.装饰器中的默认参数(具体的可以看知识扩展篇): 1.1 @param {Object} 'target' 被装饰器的类的原型 1.2 @param {string} 'name' 被装饰的类、属性、方法的名字 1.3 @param {Object} 'descriptor' 被装饰的类、属性、方法的descriptor 2.最后需要返回'descriptor ' ~~~ >[danger] ##### @+'函数名' 使用工厂方式 -- 给类加自定义的静态属性或者静态方法 ~~~ function Dspeak(target, name, descriptor) { descriptor ={ value(params){ console.log(params,122) return '我被装饰了' }, // 如果不配置下面三个项走他们的默认值 writable : false, configurable : true, enumerable : true } return descriptor } class Person{ @Dspeak speak(params){ console.log(params) return '我瞎说' } } const person = new Person() console.log(person.speak('测试装饰器接受参数')) // 打印结果: 测试装饰器接受参数 122 我被装饰了 ~~~ >[danger] ##### 推论类装饰器,target, name, descriptor 指向 ~~~ 1.通过下面案例的打印结果可以得出结论,target 指向的是被修饰方法的类, 'name' 指向的是修饰的方面名字,'descriptor ' 指向的是被修饰方法的'Object.defineProperty' 2.根据上下两个案例可以发现,如果被修饰的是一个方法,那么 想 修饰这个方法需要,对他的 'Object.defineProperty' 对象中的'value' 做操作,如果是方法则'value' 是一个方法 3.如果被修饰的对象有参数,那么在他的'Object.defineProperty'的'value'方法也可获得传递的参数 ~~~ ~~~ function Dspeak(target, name, descriptor) { console.log(target, name, descriptor) } class Person{ @Dspeak speak(params){ return '我瞎说' } } const person = new Person() console.log(person.speak('测试装饰器接受参数')) ~~~ * 打印结果 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2e3d98044cbba6a22967c88886198a2b_746x102.png) >[danger] ##### 根据阮一峰老师的案例通过-- apply ~~~ 1.在不改变原本被修饰对象返回的内容,并且在之前做一些我们想添加的操作, 可以利用这个案例 ~~~ ~~~ class Math { @log add(a, b) { return a + b; } } function log(target, name, descriptor) { var oldValue = descriptor.value; descriptor.value = function() { console.log(`Calling ${name} with`, arguments); return oldValue.apply(this, arguments); }; return descriptor; } const math = new Math(); // passed parameters should get logged now math.add(2, 4); ~~~ >[danger] ##### @+'函数' 使用方式 -- 给类加自定义的静态属性或者静态方法 ~~~ 1.简单的案例,参数是否可以被枚举 ~~~ ~~~ function isEnumerable(params) { return (target, name, descriptor)=>{ descriptor.enumerable = params console.log(descriptor) return descriptor } } class Person{ @isEnumerable(true) speak(params){ return '我瞎说' } } const person = new Person() for(let i in person){ console.log(i) // speak } ~~~ >[info] ## 属性装饰器 ~~~ 1.通过下面案例可以得到属性装饰器,没有'value' 属性 ~~~ ~~~ function isEnumerable(params) { return (target, name, descriptor)=>{ console.log(target, name, descriptor) descriptor.enumerable = params console.log(descriptor) return descriptor } } class Person{ @isEnumerable(false) speak='12' } const person = new Person() for(let i in person){ console.log(i) // speak } ~~~ ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/5b65ed4cc816edfea688e4fb84815656_751x106.png)
';