简单理解 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