如何使用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

.

簡單理解 ES7 Decorator