简单理解 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,数据映射等等
 
// 本文完