一文理解JavaScript装饰器模式
时间:2023-02-24 09:16:32|栏目:JavaScript代码|点击: 次
装饰器模式想必大家并不陌生:它允许向一个现有的对象添加新的功能,同时又不改变其结构,属于结构型模式,它是作为现有的类的一个包装。
这种模式创建了一个装饰类,用来包装原有的类,并在保持类方法签名完整性的前提下,提供了额外的功能。
在 JS 中,装饰器(Decorator
)是ES7中的一个新语法,它可以对??类、方法、属性?
?进行??修饰?
?,从而进行一些相关功能定制。它的写法与Java的注解(Annotation
)非常相似,但是功能还是有很大区别。
代码示例:
不使用装饰器:
const log = (srcFun) => { if(typeof(srcFun) !== 'function') { throw new Error(`the param must be a function`); } return (...arguments) => { console.info(`${srcFun.name} invoke with ${arguments.join(',')}`); srcFun(...arguments); } } const plus = (a, b) => a + b; const logPlus = log(plus); logPlus(1,2); // plus invoke with 1,2
使用装饰器:
const log = (target, name, descriptor) => { var oldValue = descriptor.value; descriptor.value = function() { console.log(`Calling ${name} with`, arguments); return oldValue.apply(this, arguments); }; return descriptor; } class Math { @log // Decorator plus(a, b) { return a + b; } } const math = new Math(); math.plus(1, 2); // Calling plus with 1,2
从上面的代码可以看出,如果有的时候我们并不需要关心函数的内部实现,仅仅是想调用它的话,装饰器能够带来比较好的可读性,使用起来也是非常的方便。
// readonly 装饰器 import { readonly } from 'core-decorators'; class Fudao { @readonly title = 'A'; } var fudao = new Fudao(); fudao.title = 'B'; // This will log error & doesn't work
JS中的装饰器本质也是一个函数,利用的是JS中object
的descriptor
;
装饰类和被装饰类可以独立发展,不会相互耦合,装饰模式是继承的一个替代模式,装饰模式可以动态扩展一个实现类的功能。