如何使用ES7 Decorator给你的游戏人物开挂?
// 预告: 本文有点小难度,对js不太熟的人可能比较懵逼
// 本文的目的是让你们知其然
// ==========================================
// 今天我们来说一说 es7的 装饰者模式(Decorator)
// 啥是装饰者模式,听着很高大上
// 我不和你扯什么设计模式,元编程,我从一个游戏的例子给大家讲解
// 装饰器就是给一个游戏玩家装饰上了一件牛逼的装备
// ES7 如何使用Decorator强化你的装备
// 1. 一个普通的玩家类,具有攻击力和防御力两项属性
class玩家 {
// 默认 1点攻击,1点防御
constructor(攻击力 = 1, 防御力 = 1) {
this.init(攻击力, 防御力)
}
// 初始化攻击力 防御力
init(攻击力, 防御力) {
this.攻击力 = 攻击力
this.防御力 = 防御力
}
print() {
console.log(`玩家 ==> 攻击力:${this.攻击力}, 防御力:${this.防御力}`)
}
}
letplayer1 =new玩家()// 创建一个玩家实例
player1.print()// '玩家 ==> 攻击力:1, 防御力:1'
// 2. 这一步厉害了
// 我们创建一个方天画戟的装饰器,一出生自动加100攻击力
// 装饰器接受三个固定参数, (目标,属性,属性描述)
function方天画戟(target, prop, descriptor) {
letfunc = descriptor.value// 获取目标的init方法
descriptor.value =function() {
// arguments[0]即第一个参数 => 攻击力
arguments[0] += 100// 攻击力+100
returnfunc.apply(target, arguments)// init(100, 1)
}
returndescriptor// 知道为什么要返回它么
}
// 升级版玩家,出生自带方天画戟
class玩家2 {
constructor(攻击力 = 1, 防御力 = 1) {
this.init(攻击力, 防御力)
}
// 在init初始化方法上写上 '@装饰器名称' 就把外挂加上了
// 另外装饰器是可以叠加的
// @马云 艾特一下马云,让你更有钱
// 这下子牛逼了
@方天画戟
init(攻击力, 防御力) {
this.攻击力 = 攻击力
this.防御力 = 防御力
}
print() {
console.log(`玩家 ==> 攻击力:${this.攻击力}, 防御力:${this.防御力}`)
}
}
letplayer2 =new玩家2()// 升级版玩家
player2.print()// '玩家 ==> 攻击力:101, 防御力:1'
// 目前Decorator特性还没有任何浏览器支持
// 本文的代码需要使用babel编译之后才会看到结果
// *题外话*,如果你想知道Decorator是干什么的,本文可以帮助您理解
// 如果你想彻底搞懂Decorator,你还需要了解Object.defineProperty
// Object.defineProperty很强大,前端同学常用的vue就是基于此做的数据响应式
// 熟悉Java Python的同学对Decorator应该早已很熟悉了,强大的AOP,数据映射等等
// 本文完