裝飾器模式

適配器模式是原來的接口就不能用了，需要做一個適配之后才能繼續使用。
裝飾器是原先接口還能用，在此基礎上添加一些新功能。（為對象添加新功能，并且不改變原有結構和功能）

下面我們來舉一個裝飾器的例子：

class Circle {draw() {console.log('畫一個圓形')} }class Decorator {constructor(circle) {this.circle = circle}draw() {this.circle.draw()this.setRedBorder(circle)}setRedBorder(circle) {console.log('設置紅色邊框')} }// 測試 let circle = new Circle() circle.draw()let dec = new Decorator(circle) dec.draw()

可以看到，通過裝飾器方式獲取到的dec，既可以畫一個圓，又可以設置紅色邊框。通過上述代碼，其實我們也可以感受到Decorator就像是給Circle加了一層外包裝。所以有的時候我們將裝飾器也稱之為包裝器（wrapper）

我們剛才看到上面的代碼樣式，其實理解起來不算特別友好。在Spring Boot中，可以通過@的方式來添加裝飾器，但目前JavaScript還不支持，不過Typescript中，已經可以作為一個實驗性的功能加以支持。不過在JavaScript中，還可以通過安裝一些npm包的方式加以支持。下面我們來看看如何寫出更容易理解的裝飾器代碼。

使用裝飾器

我們首先來看一個簡單的例子：

@testDec class Demo {// ... }function testDec(target) {target.isDec = true } alert(Demo.isDec) // true

他的原理等同于

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

可以看到它其實有點類似于一種包裝的形式。

加參數的裝飾器

function testDec(isDec) {return function (target) {target.isDec = isDec} }@testDec(false) class Demo {} alert(Demo.isDec) // false

混合形式Mixins裝飾器

除了簡單的參數之外，還可以使用混合形式。

function mixins(...list) {return function (target) {// 將所有可枚舉屬性的值從一個或多個源對象復制到目標對象。它將返回目標對象Object.assign(target.prototype, ...list)} }const Foo = {foo() {alert('foo')} }@mixins(Foo) class MyClass {} let obj = new MyClass() obj.foo() // foo

裝飾方法

實現只讀功能：

function readonly(target, name, descriptor) {// descriptor屬性描述對象 (Object.defineProperty中會用到)， 原來的值如下：/* value: specifiedFunction,enumerate: false,configurable: true,writable: true */descriptor.writable = falsereturn descriptor }class Person {constructor() {this.first = 'A'this.last = 'B'}@readonlyname() {return `${this.first} ${this.last}`} }let p = new Person() console.log(p.name) // false p.name = function() {alert(100) }

實現打印日志，然后再執行函數的值：

function log(target, name, descriptor) {let oldValue = descriptor.value descriptor.value = function () {console.log(`calling ${name} with`, arguments)// oldValue是一個函數，此處是做加法的執行return oldValue.apply(this, arguments)}return descriptor }class Math {@logadd(a, b) {return a + b} }let math = new Math() const result = math.add(2, 4) console.log(result) // calling add with Arguments(一個對象) 6 《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的JavaScript装饰器模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。