簡單理解 ES7 Decorator（裝飾器）

如何使用ES7 Decorator給你的遊戲人物開掛?

// 預告: 本文有點小難度,對js不太熟的人可能比較懵逼
// 本文的目的是讓大家知其然
// ==========================================
// 今天咱們來講一說 es7的 裝飾者模式(Decorator) 
// 啥是裝飾者模式,聽着很高大上
// 我不和你扯什麼設計模式,元編程,我從一個遊戲的例子給你們講解
// 裝飾器就是給一個遊戲玩家裝飾上了一件牛逼的裝備
// ES7 如何使用Decorator強化你的裝備
 
// 1. 一個普通的玩家類,具備攻擊力和防護力兩項屬性
class 玩家 {
    // 默認 1點攻擊,1點防護
    constructor(攻擊力 = 1, 防護力 = 1) {
    this.init(攻擊力, 防護力)
    }
 
    // 初始化攻擊力 防護力
    init(攻擊力, 防護力) {
    this.攻擊力 = 攻擊力
    this.防護力 = 防護力
    }
    print() {
    console.log(`玩家 ==> 攻擊力:${this.攻擊力}, 防護力:${this.防護力}`)
    }
}
 
let player1 = new 玩家()  // 建立一個玩家實例
player1.print()     // '玩家 ==> 攻擊力: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.防護力 = 防護力
    }
    print() {
    console.log(`玩家 ==> 攻擊力:${this.攻擊力}, 防護力:${this.防護力}`)
    }
}
 
let player2 = new 玩家2() // 升級版玩家
player2.print()      // '玩家 ==> 攻擊力:101, 防護力:1'
 
// 目前Decorator特性尚未任何瀏覽器支持
// 本文的代碼須要使用babel編譯以後纔會看到結果
 
// *題外話*,若是你想知道Decorator是幹什麼的,本文能夠幫助您理解
// 若是你想完全搞懂Decorator,你還須要瞭解Object.defineProperty
// Object.defineProperty很強大,前端同窗經常使用的vue就是基於此作的數據響應式
// 熟悉Java Python的同窗對Decorator應該早已很熟悉了,強大的AOP,數據映射等等
 
// 本文完

轉載：https://zhuanlan.zhihu.com/p/29712462