装饰模式概述

什么是装饰模式

• 定义: 动态的给一个对象添加一些额外的职责,就增加功能来说,装饰模式比生成子类更加灵活
• 本人的定义: 在不改变原函数的情况下,给他添加一些额外的属性函数等等(函数作为参数传递给另外一个函数内部)

代码样例

//这是一个普通的函数
function add() {
	console.log('add函数开始执行')
	console.log('欢迎来到残梦博客园')
	console.log('add函数执行完毕')
	return '<div>函数</div>'
}
//给add函数再添加一些生命周期
function newAdd(obj) {
	console.log(obj)
}
newAdd(add())
//经过装饰模式之后,add函数在原先的基础之上增加了额外的方法,但是并不会去破坏add函数原有的方法
//可以理解为继承的另外一种方式

那么装饰模式有什么作用呢,总不能白白浪费时间去学了一个无用的东西
举例是react-redux的例子,如果没学过可以不用继续往下看了

• react中的高阶组件全都可以看成是装饰模式
• react-redux中的connect就是一个高阶组件

const mapStateToProps = {xxxx}
const mapDispatchToProps = {xxxx}
//这是一个Demo组件
function Demo(){
    render(xxx)
}
//connect(mapStateToProps,mapDispathToProps)(Demo)

如果学习过react-redux的人看这段代码一定不是很陌生,在不改变demo原生状态的情况下,给他添加了state和dispath等等