装饰模式

装饰模式的哲学：不改变原来的类，并且不使用继承，把一个类的方法增强

比如现在有一个学生类，他有一个方法学习，学习内容是html，css，JavaScript，jQuery。小明就是这个学生的实例

    <script>
     function Student() {

}
Student.prototype.study = function() {
    console.log("html")
    console.log("css")
    console.log("JavaScript")
};
// 装饰类
function Zhuangshi(somebody) {
    // this.somebody指向的是xiaoming的实例，并且return出去的也是这个小明的实例
    // 如果此时给somebody添加的任何属性都是给小明这个实例添加的
    this.somebody = somebody;
    this.somebody.haha = '哈哈'
    return this.somebody;
}
var xiaoming = new Student();
// 给xiaoming 添加装饰
xiaoming = new Zhuangshi(xiaoming);
console.log(xiaoming.haha)
console.log(xiaoming instanceof Student)
console.log(xiaoming instanceof Zhuangshi)
    </script>

 

 

 

上面的代码中，核心的部分就是Zhuangshi函数，内部不是默认四步走返回Zhuangshi构造出的实例，而是直接返回传进来的实例对象，如果构造函数return出去的是一个引用类型值，则直接返回这个引用类型值

所以上面代码中haha属性实际上就是加在xiaoming的身上的

此时如果我们想给当前的xiaoming的实例装饰一些其他的内容。不仅仅是增加属性，而是增加功能，比如小明本身有study功能，此时我们想增强这个study功能

    <script>
   function Student() {

}
Student.prototype.study = function() {
    console.log("html")
    console.log("css")
    console.log("JavaScript")
};
// 装饰类
function Zhuangshi(somebody) {
    // this.somebody指向的是xiaoming的实例，并且return出去的也是这个小明的实例
    // 如果此时给somebody添加的任何属性都是给小明这个实例添加的
    this.somebody = somebody;
    // 备份xiaoming已有的功能
this.somebody._study = somebody.study;
//将xiaoming实例的study指向了Zhuangshi的study
    this.somebody.study = this.study;
    return this.somebody;
}
Zhuangshi.prototype.study = function() {
//小明已有的方法内容
    this._study();
    console.log("vue");
    console.log("webpack");
    console.log("React");
}
var xiaoming = new Student();
// 给xiaoming 添加装饰
xiaoming = new Zhuangshi(xiaoming);
xiaoming.study()
    </script>