装饰模式

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

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

 1     <script>
 2      function Student() {
 3 
 4 }
 5 Student.prototype.study = function() {
 6     console.log("html")
 7     console.log("css")
 8     console.log("JavaScript")
 9 };
10 // 装饰类
11 function Zhuangshi(somebody) {
12     // this.somebody指向的是xiaoming的实例，并且return出去的也是这个小明的实例
13     // 如果此时给somebody添加的任何属性都是给小明这个实例添加的
14     this.somebody = somebody;
15     this.somebody.haha = '哈哈'
16     return this.somebody;
17 }
18 var xiaoming = new Student();
19 // 给xiaoming 添加装饰
20 xiaoming = new Zhuangshi(xiaoming);
21 console.log(xiaoming.haha)
22 console.log(xiaoming instanceof Student)
23 console.log(xiaoming instanceof Zhuangshi)
24     </script>

 

 

 

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

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

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

 1     <script>
 2    function Student() {
 3 
 4 }
 5 Student.prototype.study = function() {
 6     console.log("html")
 7     console.log("css")
 8     console.log("JavaScript")
 9 };
10 // 装饰类
11 function Zhuangshi(somebody) {
12     // this.somebody指向的是xiaoming的实例，并且return出去的也是这个小明的实例
13     // 如果此时给somebody添加的任何属性都是给小明这个实例添加的
14     this.somebody = somebody;
15     // 备份xiaoming已有的功能
16 this.somebody._study = somebody.study;
17 //将xiaoming实例的study指向了Zhuangshi的study
18     this.somebody.study = this.study;
19     return this.somebody;
20 }
21 Zhuangshi.prototype.study = function() {
22 //小明已有的方法内容
23     this._study();
24     console.log("vue");
25     console.log("webpack");
26     console.log("React");
27 }
28 var xiaoming = new Student();
29 // 给xiaoming 添加装饰
30 xiaoming = new Zhuangshi(xiaoming);
31 xiaoming.study()
32     </script>

标签：xiaoming,somebody,log,study,模式,Zhuangshi,console,装饰
来源： https://www.cnblogs.com/keyeking/p/15340025.html