简单理解 ES7 Decorator

Posted 2020-10-14 每天都要进步一点点

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

.