一文理解JavaScript裝飾器模式
更新時間：2022年04月26日 11:01:09 作者：掘金安東尼
這篇文章主要介紹了一文理解JavaScript裝飾器模式，文章基于JavaScript的相關(guān)資料展開詳細介紹，具有一定的參考價值，需要的小伙伴可以參考一下
裝飾器模式想必大家并不陌生：它允許向一個現(xiàn)有的對象添加新的功能，同時又不改變其結(jié)構(gòu)，屬于結(jié)構(gòu)型模式，它是作為現(xiàn)有的類的一個包裝。
這種模式創(chuàng)建了一個裝飾類，用來包裝原有的類，并在保持類方法簽名完整性的前提下，提供了額外的功能。
在 JS 中，裝飾器（Decorator）是ES7中的一個新語法，它可以對??類、方法、屬性??進行??修飾??，從而進行一些相關(guān)功能定制。它的寫法與Java的注解（Annotation）非常相似，但是功能還是有很大區(qū)別。
代碼示例：
不使用裝飾器：
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從上面的代碼可以看出，如果有的時候我們并不需要關(guān)心函數(shù)的內(nèi)部實現(xiàn)，僅僅是想調(diào)用它的話，裝飾器能夠帶來比較好的可讀性，使用起來也是非常的方便。
// readonly 裝飾器
import { readonly } from 'core-decorators';
class Fudao {
@readonly
title = 'A';
}
var fudao = new Fudao();
fudao.title = 'B'; // This will log error & doesn't workJS中的裝飾器本質(zhì)也是一個函數(shù)，利用的是JS中object的descriptor；
裝飾類和被裝飾類可以獨立發(fā)展，不會相互耦合，裝飾模式是繼承的一個替代模式，裝飾模式可以動態(tài)擴展一個實現(xiàn)類的功能。
到此這篇關(guān)于一文理解JavaScript裝飾器模式的文章就介紹到這了,更多相關(guān)JS裝飾器模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript 組件之旅（四）：測試 JavaScript 組件
本期，我們要討論的話題是 JavaScript 的測試，以檢查組件的狀態(tài)和工作方式是否符合預(yù)期，還會介紹一個可以方便編寫測試用例的測試方法。這里說的測試當然是使用自動化的測試手段，這是軟件質(zhì)量保證(QA)的重要環(huán)節(jié)。2009-10-10
在這篇文章中,小編將和大家分享18個JavaScript技巧,以及一些你應(yīng)該知道的示例代碼,以編寫簡潔高效的代碼,感興趣的小伙伴快跟隨小編一起學(xué)習(xí)一下吧2024-01-01
在本篇文章中，小編給大家分享了關(guān)于js隱式轉(zhuǎn)換的相關(guān)知識點內(nèi)容，有興趣的朋友們參考學(xué)習(xí)下。2018-09-09
全局數(shù)據(jù)共享是為了解決組件之間數(shù)據(jù)共享的問題,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局數(shù)據(jù)共享和分包的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了JS實現(xiàn)文件動態(tài)順序載入的方法,實例分析了基于Mootools框架實現(xiàn)動態(tài)載入的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
寫任何編程代碼，不同的開發(fā)者都會有不同的見解。但參考一下總是好的，下面是來自Javascript Toolbox發(fā)布的14條最佳JS代碼編寫技巧，Sofish翻譯(1,2)。2011-01-01
微信小游戲之使用three.js 繪制一個旋轉(zhuǎn)的三角形
three.js是一個可以使用javascript繪制3d圖形的庫，它對WebGL的api進行封裝，使開發(fā)更加方便，就像jQuery對DOM的api進行封裝一樣。這篇文章主要介紹了微信小游戲之使用three.js 繪制一個旋轉(zhuǎn)的三角形,需要的朋友可以參考下2019-06-06
Ionic學(xué)習(xí)日記實現(xiàn)驗證碼倒計時
本篇文章主要介紹了Ionic學(xué)習(xí)日記實現(xiàn)驗證碼倒計時，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了js實現(xiàn)隨機點名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要為大家詳細介紹了javascript實現(xiàn)拼圖游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01