如何使用ES7 Decorator給你的遊戲人物開掛
// 預告： 本文有點小難度，對js不太熟的人可能比較懵逼
// 本文的目的是讓你們知其然
// ==========================================
// 今天我們來說一說 es7的 裝飾者模式（Decorator）
// 啥是裝飾者模式，聽著很高大上
// 我不和你扯什麼設計模式，超程式設計，我從一個遊戲的例子給大家講解
// 裝飾器就是給一個遊戲玩家裝飾上了一件牛逼的裝備
// ES7 如何使用Decorator強化你的裝備
// 1。 一個普通的玩家類，具有攻擊力和防禦力兩項屬性
class
玩家
{
// 預設 1點攻擊，1點防禦
constructor
（
攻擊力
=
1
，
防禦力
=
1
）
{
this
。
init
（
攻擊力
，
防禦力
）
}
// 初始化攻擊力 防禦力
init
（
攻擊力
，
防禦力
）
{
this
。
攻擊力
=
攻擊力
this
。
防禦力
=
防禦力
}
（）
{
console
。
log
（
`玩家 ==> 攻擊力：
${
this
。
攻擊力
}
， 防禦力：
${
this
。
防禦力
}
`
）
}
}
let
player1
=
new
玩家
（）
// 建立一個玩家例項
player1
。
（）
// ‘玩家 ==> 攻擊力：1， 防禦力：1’
// 2。 這一步厲害了
// 我們建立一個方天畫戟的裝飾器，一出生自動加100攻擊力
// 裝飾器接受三個固定引數， （目標，屬性，屬性描述）
function
方天畫戟
（
target
，
prop
，
descriptor
）
{
let
func
=
descriptor
。
value
// 獲取目標的init方法
descriptor
。
value
=
function
（）
{
// arguments［0］即第一個引數 => 攻擊力
arguments
［
0
］
+=
100
// 攻擊力+100
return
func
。
apply
（
target
，
arguments
）
// init（100， 1）
}
return
descriptor
// 知道為什麼要返回它麼
}
// 升級版玩家，出生自帶方天畫戟
class
玩家2
{
constructor
（
攻擊力
=
1
，
防禦力
=
1
）
{
this
。
init
（
攻擊力
，
防禦力
）
}
// 在init初始化方法上寫上 ‘@裝飾器名稱’ 就把外掛加上了
// 另外裝飾器是可以疊加的
// @馬雲 艾特一下馬雲，讓你更有錢
// 這下子牛逼了
@
方天畫戟
init
（
攻擊力
，
防禦力
）
{
this
。
攻擊力
=
攻擊力
this
。
防禦力
=
防禦力
}
（）
{
console
。
log
（
`玩家 ==> 攻擊力：
${
this
。
攻擊力
}
， 防禦力：
${
this
。
防禦力
}
`
）
}
}
let
player2
=
new
玩家2
（）
// 升級版玩家
player2
。
（）
// ‘玩家 ==> 攻擊力：101， 防禦力：1’
// 目前Decorator特性還沒有任何瀏覽器支援
// 本文的程式碼需要使用babel編譯之後才會看到結果
// *題外話*，如果你想知道Decorator是幹什麼的，本文可以幫助您理解
// 如果你想徹底搞懂Decorator，你還需要了解Object。defineProperty
// Object。defineProperty很強大，前端同學常用的vue就是基於此做的資料響應式
// 熟悉Java Python的同學對Decorator應該早已很熟悉了，強大的AOP，資料對映等等
// 本文完
// 最後，中英文切換真他媽累，知乎編輯器真他媽難用
