成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ES7 裝飾者模式Decorator

aaron / 3225人閱讀

摘要：裝飾者模式可以動態(tài)的給某個對象添加一些額外的職責(zé)，但是卻不會影響其它的從這個類中派生出的其它對象。裝飾者模式能夠能夠在不改變自身對象的基礎(chǔ)上，在程序運(yùn)行期間給對象動態(tài)的添加功能。裝飾者是一種即用即付的方式，與繼承相比更是一種靈活輕便的做法。

什么是decorator

在程序開發(fā)過程中，我們可能希望某個類或者方法，并不是天生就具有很龐大，但是又不是很常用的功能。裝飾者模式可以動態(tài)的給某個對象添加一些額外的職責(zé)，但是卻不會影響其它的從這個類中派生出的其它對象。
裝飾者模式能夠能夠在不改變自身對象的基礎(chǔ)上，在程序運(yùn)行期間給對象動態(tài)的添加功能。這其實(shí)就像我們在游戲中要給游戲角色買裝備一樣，同一個角色本身的各種屬性都是一樣的，但是當(dāng)我們給它穿上不同的裝備后，角色的各種屬性就會出現(xiàn)差異。

應(yīng)用實(shí)例

首先創(chuàng)建一個類

function gengerateHP(target) {
    target.hp = 1000
}
@generateHP
class Role {    
}
const role = new Role()
console.log(role.hp)    //undefined
console.log(Role.hp)   //1000

其實(shí)在這里就產(chǎn)生了疑問，為什么這個hp屬性是加在了Role這個類上，而類的實(shí)例卻沒有這個屬性，我們知道類本身指向的是構(gòu)造函數(shù)，它的方法都被定義在prototype屬性上。那么為什么類有hp屬性，而它的實(shí)例卻沒有hp這個屬性呢，這說明hp屬性并沒有被定義在prototype屬性上，屬于類卻不屬于某個實(shí)例。

decorator的原理

decorator的實(shí)現(xiàn)原理是以來ES5的Object.defineProperty方法的而Object.defineProperty()方法所做的就是為一個對象添加新的屬性，或者更改對象的某個已經(jīng)存在的屬性。
它的調(diào)用方式是

Object.defineProperty(target, prop, descriptor) {
}

其中第一個參數(shù)是代表目標(biāo)對象，prop代表對象的屬性名，descriptor是對屬性的描述，其字段決定了prop屬性的一些特性，比如writable屬性就決定了目標(biāo)對象的屬性是否可以更改。

function noWrite(target, prop, desc) {
    desc.writable = false
    return desc
}
class Man {
    @noWrite
    name() {
        return "小明"
    }
}
const xiaoming = new Man()
xiaoming.name = "xiaoming"

這里就會報(bào)錯： TypeError: Cannot assign to read only property ‘name’
總結(jié)起來說，decorate裝飾器模式其實(shí)就是在我們需要某個臨時的屬性或方法時，給目標(biāo)對象加上這個屬性或者方法。裝飾者是一種’即用即付’的方式，與繼承相比更是一種靈活輕便的做法。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80267.html

相關(guān)文章

  • ES7-Decorator-裝飾者模式

    摘要：裝飾者要實(shí)現(xiàn)這些相同的方法繼承自裝飾器對象創(chuàng)建具體的裝飾器，也是接收作對參數(shù)接下來我們要為每一個功能創(chuàng)建一個裝飾者對象，重寫父級方法，添加我們想要的功能。 裝飾模式 僅僅包裝現(xiàn)有的模塊，使之 更加華麗 ，并不會影響原有接口的功能 —— 好比你給手機(jī)添加一個外殼罷了，并不影響手機(jī)原有的通話、充電等功能； 使用 ES7 的 decorator ES7 中增加了一個 decorator 屬性...

    zhangxiangliang 評論0 收藏0

  • 5 分鐘即可掌握的 JavaScript 裝飾者模式與 AOP

    摘要：下裝飾者的實(shí)現(xiàn)了解了裝飾者模式和的概念之后，我們寫一段能夠兼容的代碼來實(shí)現(xiàn)裝飾者模式原函數(shù)拍照片定義函數(shù)裝飾函數(shù)加濾鏡用裝飾函數(shù)裝飾原函數(shù)這樣我們就實(shí)現(xiàn)了抽離拍照與濾鏡邏輯，如果以后需要自動上傳功能，也可以通過函數(shù)來添加。 showImg(https://segmentfault.com/img/bVbueyz?w=852&h=356); 什么是裝飾者模式 當(dāng)我們拍了一張照片準(zhǔn)備發(fā)朋友...

    chunquedong 評論0 收藏0

  • JS設(shè)計(jì)模式--裝飾者模式

    摘要：當(dāng)接口比較多，裝飾器也比較多時，可以獨(dú)立抽取一個裝飾器父類，實(shí)現(xiàn)目標(biāo)類的所有接口，再創(chuàng)建真正的裝飾器來繼承這個父類。四的實(shí)現(xiàn)方式提供了一種類似的注解的語法糖，來實(shí)現(xiàn)裝飾者模式。 歡迎關(guān)注我的公眾號睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言 所謂裝飾者模式，就是動態(tài)的給類或?qū)ο笤黾勇氊?zé)的設(shè)計(jì)模式。它...

    wmui 評論0 收藏0

  • Decorator:從原理到實(shí)踐，我一點(diǎn)都不虛~

    摘要：描述符必須是這兩種形式之一不能同時是兩者。可以是任何有效的值數(shù)值，對象，函數(shù)等。當(dāng)且僅當(dāng)該屬性的為時，才能被賦值運(yùn)算符改變。特點(diǎn)就是不影響之前對象的特性，而新增額外的職責(zé)功能。 前言 原文鏈接:[Nealyang/personalBlog]() showImg(https://segmentfault.com/img/remote/1460000018958861); ES6 已經(jīng)不必...

    XanaHopper 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<