一文理解JavaScript裝飾器模式
裝飾器模式想必大家并不陌生:它允許向一個(gè)現(xiàn)有的對(duì)象添加新的功能,同時(shí)又不改變其結(jié)構(gòu),屬于結(jié)構(gòu)型模式,它是作為現(xiàn)有的類的一個(gè)包裝。
這種模式創(chuàng)建了一個(gè)裝飾類,用來(lái)包裝原有的類,并在保持類方法簽名完整性的前提下,提供了額外的功能。
在 JS 中,裝飾器(Decorator
)是ES7中的一個(gè)新語(yǔ)法,它可以對(duì)??類、方法、屬性?
?進(jìn)行??修飾?
?,從而進(jìn)行一些相關(guān)功能定制。它的寫(xiě)法與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
從上面的代碼可以看出,如果有的時(shí)候我們并不需要關(guān)心函數(shù)的內(nèi)部實(shí)現(xiàn),僅僅是想調(diào)用它的話,裝飾器能夠帶來(lái)比較好的可讀性,使用起來(lái)也是非常的方便。
// 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中的裝飾器本質(zhì)也是一個(gè)函數(shù),利用的是JS中object
的descriptor
;
裝飾類和被裝飾類可以獨(dú)立發(fā)展,不會(huì)相互耦合,裝飾模式是繼承的一個(gè)替代模式,裝飾模式可以動(dòng)態(tài)擴(kuò)展一個(gè)實(shí)現(xiàn)類的功能。
到此這篇關(guān)于一文理解JavaScript裝飾器模式的文章就介紹到這了,更多相關(guān)JS裝飾器模式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript indexOf的第二個(gè)參數(shù)用法
indexOf 是我們非常熟悉的一個(gè)方法,它可以用來(lái)獲取某一個(gè)元素在一個(gè)數(shù)組里的位置,我們一般就會(huì)使用 array.indexOf(element) 的方法來(lái)進(jìn)行使用,但是,大家有沒(méi)有使用過(guò) indexOf 的第二個(gè)參數(shù)呢?本文將給大家介紹一下indexOf的第二個(gè)參數(shù)用法,需要的朋友可以參考下2024-02-02JS實(shí)現(xiàn)數(shù)組去重方法總結(jié)(六種方法)
這篇文章給大家總結(jié)下JS實(shí)現(xiàn)數(shù)組去重方法(六種方法),面試中也經(jīng)常會(huì)遇到這個(gè)問(wèn)題。文中給大家引申的還有合并數(shù)組并去重的方法,感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2017-07-07JS面向?qū)ο髮?shí)現(xiàn)飛機(jī)大戰(zhàn)
這篇文章主要為大家詳細(xì)介紹了JS面向?qū)ο髮?shí)現(xiàn)飛機(jī)大戰(zhàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08JS實(shí)現(xiàn)的通用表單驗(yàn)證插件完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的通用表單驗(yàn)證插件,可針對(duì)常見(jiàn)的日期、密碼、姓名等進(jìn)行驗(yàn)證并給出提示信息,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08