JavaScript裝飾器模式怎么用

這篇文章主要講解了“JavaScript裝飾器模式怎么用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“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；

裝飾類和被裝飾類可以獨立發展，不會相互耦合，裝飾模式是繼承的一個替代模式，裝飾模式可以動態擴展一個實現類的功能。

感謝各位的閱讀，以上就是“JavaScript裝飾器模式怎么用”的內容了，經過本文的學習后，相信大家對JavaScript裝飾器模式怎么用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！