JavaScript装饰者模式原理与用法实例详解(2)

var targetShop = function(){ this.getPrice = function(){ return 15000; } this.assemble =function(){ document.write("汽车组装....<br>") } Interface.ensureImplement(this,comInterface);//接口检验 }

（3）各装饰类，包裹原对象的东西。

#M:

var carM = function(carShop) { this.getPrice = function () { return 1000 + carShop.getPrice(); } this.assemble = function () { document.write("M组装....<br>") } Interface.ensureImplement(this,comInterface);//接口检验 }

#N:

var carN = function(carShop){ this.getPrice = function(){ return 2000+carShop.getPrice(); } this.assemble =function(){ document.write("N组装....<br>") } Interface.ensureImplement(this,comInterface);//接口检验 }

#K:

var carK=function (carShop) { this.getPrice=function () { return 3000+carShop.getPrice(); } this.assemble=function () { document.write("K组装....<br>") } Interface.ensureImplement(this,comInterface);//接口检验 };

（4）使用各种装饰来包装我们的车吧

//包装车 var newCar=new carK(new carM(new targetShop));//有K和M的车 var newCar2=new carK(new carM(new carN(new targetShop))); document.write(newCar.getPrice()+"<br>"); document.write(newCar2.getPrice());

总结一下，装饰者可以用在类上，同样也可以用在类中的函数上。

如果原有的功能不是适合你的项目， 你需要大量的扩充原有功能， 并且不不想改变原有的接口,那你用装饰者模式就对了。

用图理解一下上述模式：

包装的原理图：--包装链

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：测试上述代码运行效果。

更多关于JavaScript相关内容还可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》