如何使用ES7 Decorator給你的游戲人物開(kāi)掛?
// 預(yù)告: 本文有點(diǎn)小難度,對(duì)js不太熟的人可能比較懵逼
// 本文的目的是讓你們知其然
// ==========================================
// 今天我們來(lái)說(shuō)一說(shuō) es7的 裝飾者模式(Decorator)
// 啥是裝飾者模式,聽(tīng)著很高大上
// 我不和你扯什么設(shè)計(jì)模式,元編程,我從一個(gè)游戲的例子給大家講解
// 裝飾器就是給一個(gè)游戲玩家裝飾上了一件牛逼的裝備
// ES7 如何使用Decorator強(qiáng)化你的裝備
// 1. 一個(gè)普通的玩家類(lèi),具有攻擊力和防御力兩項(xiàng)屬性
class玩家 {
// 默認(rèn) 1點(diǎn)攻擊,1點(diǎn)防御
constructor(攻擊力 = 1, 防御力 = 1) {
this.init(攻擊力, 防御力)
}
// 初始化攻擊力 防御力
init(攻擊力, 防御力) {
this.攻擊力 = 攻擊力
this.防御力 = 防御力
}
print() {
console.log(`玩家 ==> 攻擊力:${this.攻擊力}, 防御力:${this.防御力}`)
}
}
letplayer1 =new玩家()// 創(chuàng)建一個(gè)玩家實(shí)例
player1.print()// '玩家 ==> 攻擊力:1, 防御力:1'
// 2. 這一步厲害了
// 我們創(chuàng)建一個(gè)方天畫(huà)戟的裝飾器,一出生自動(dòng)加100攻擊力
// 裝飾器接受三個(gè)固定參數(shù), (目標(biāo),屬性,屬性描述)
function方天畫(huà)戟(target, prop, descriptor) {
letfunc = descriptor.value// 獲取目標(biāo)的init方法
descriptor.value =function() {
// arguments[0]即第一個(gè)參數(shù) => 攻擊力
arguments[0] += 100// 攻擊力+100
returnfunc.apply(target, arguments)// init(100, 1)
}
returndescriptor// 知道為什么要返回它么
}
// 升級(jí)版玩家,出生自帶方天畫(huà)戟
class玩家2 {
constructor(攻擊力 = 1, 防御力 = 1) {
this.init(攻擊力, 防御力)
}
// 在init初始化方法上寫(xiě)上 '@裝飾器名稱' 就把外掛加上了
// 另外裝飾器是可以疊加的
// @馬云 艾特一下馬云,讓你更有錢(qián)
// 這下子牛逼了
@方天畫(huà)戟
init(攻擊力, 防御力) {
this.攻擊力 = 攻擊力
this.防御力 = 防御力
}
print() {
console.log(`玩家 ==> 攻擊力:${this.攻擊力}, 防御力:${this.防御力}`)
}
}
letplayer2 =new玩家2()// 升級(jí)版玩家
player2.print()// '玩家 ==> 攻擊力:101, 防御力:1'
// 目前Decorator特性還沒(méi)有任何瀏覽器支持
// 本文的代碼需要使用babel編譯之后才會(huì)看到結(jié)果
// *題外話*,如果你想知道Decorator是干什么的,本文可以幫助您理解
// 如果你想徹底搞懂Decorator,你還需要了解Object.defineProperty
// Object.defineProperty很強(qiáng)大,前端同學(xué)常用的vue就是基于此做的數(shù)據(jù)響應(yīng)式
// 熟悉Java Python的同學(xué)對(duì)Decorator應(yīng)該早已很熟悉了,強(qiáng)大的AOP,數(shù)據(jù)映射等等
// 本文完
