In-depth understanding of the JavaScript series (29): Decorator mode for design patterns

introduces decorators to provide more resilient alternatives than inheritance. Decorators use objects for wrapping the same interface not only to allow you to add behavior to the method, but also to set the method to the original object invocation (such as the decorator's constructor). Decorators are used to add new functionality in the form of overloaded methods that can be preceded or followed by a decorator to achieve a specific purpose. What are the benefits of the decorator pattern in the body? As I said before, decorators are an alternative to implementing inheritance. When the script runs, adding behavior to subclasses affects all instances of the original class, but not the decorator. Instead, it can add new behaviors to different objects. As shown in the following code://classes (functions) that need to be decoratedfunctionMacbook () { This. Cost =function () {        return1000; };}functionMemory (MacBook) { This. Cost =function () {        returnMacbook.cost () + 75; };}functionbluraydrive (MacBook) { This. Cost =function () {        returnMacbook.cost () + 300; };}functionInsurance (MacBook) { This. Cost =function () {        returnMacbook.cost () + 250; };}//usagevarMymacbook =NewInsurance (NewBluraydrive (NewMemory (NewMacbook ())); Console.log (Mymacbook.cost ()); Here is another instance, when we call Performtask on the adorner object, it not only has some decorator behavior, but also invokes the Performtask function of the underlying object. functionConcreteclass () { This. Performtask =function () {         This. Pretask (); Console.log (' Doing something ');  This. Posttask (); };}functionAbstractdecorator (decorated) { This. Performtask =function() {decorated.performtask (); };}functionConcretedecoratorclass (decorated) { This. Base =Abstractdecorator;  This. Base (decorated); Decorated.pretask=function() {Console.log (' Pre-calling. ');    }; Decorated.posttask=function() {Console.log (' Post-calling. '); };}varConcrete =NewConcreteclass ();varDecorator1 =NewConcretedecoratorclass (concrete);varDecorator2 =NewConcretedecoratorclass (Decorator1);d ecorator2.performtask (); One more thorough example:varTree ={};tree.decorate=function() {Console.log (' Make sure the tree won\ ' t fall ');}; Tree.getdecorator=function(deco) {Tree[deco].prototype= This; return NewTree[deco];}; Tree. Redballs=function () {     This. Decorate =function () {         This. RedBalls.prototype.decorate ();//7th step: The decorate method of first executing the prototype (this time it is Angel)Console.log (' Put on some red balls ');//8th step and then output red        //take these 2 steps as the decorate method of Redballs}};tree. Blueballs=function () {     This. Decorate =function () {         This. BlueBalls.prototype.decorate ();//1th Step: First execute the decorate method of the prototype, i.e. Tree.decorate ()Console.log (' Add blue Balls ');//2nd step and then output blue        //take these 2 steps as the decorate method of Blueballs}};tree. Angel=function () {     This. Decorate =function () {         This. Angel.prototype.decorate ();//4th Step: The decorate method of first executing the prototype (this time it is blueballs)Console.log (' An angel on the top ');//5th step re-output Angel        //take these 2 steps as the decorate method of Angel}};tree= Tree.getdecorator (' blueballs ');//3rd Step: Assign the Blueballs object to the tree, and the getdecorator in the parent prototype will still be availableTree = tree.getdecorator (' Angel ');//6th step: Assign the Angel object to the tree, and the getdecorator in the parent prototype will still be availableTree = tree.getdecorator (' redballs ');//9th step: Assign the Redballs object to the treetree.decorate ();//10th Step: Execute the Decorate method of the Redballs objectThe summary decorator pattern is a way of dynamically adding more versatility to an existing function, placing each function to be decorated in a separate function, and then wrapping the existing function object to be decorated with the function, so that when special behavior needs to be performed, the calling code can selectively, Use decorative features sequentially to wrap objects. The advantage is that the core duties of the class (function) are separated from the decorative functional areas. Synchronization and recommendation this article has been synchronized to the directory index: in-depth understanding of JavaScript series in-depth understanding of the JavaScript series, including the original, translation, reprint and other types of articles, if it is useful to you, please recommend supporting a, to the power of the uncle writing. 

In-depth understanding of the JavaScript series (29): Decorator mode for design patterns