装饰者模式试玩

装饰者模式实践

最新推荐文章于 2025-09-04 18:55:33 发布

weixin_34404393

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/samwu/p/4063418.html

本文探讨了装饰者模式在JavaScript中的应用，并通过实例演示了如何利用该模式为对象添加新功能而不改变其原有结构。同时讨论了函数式写法中的一些挑战及解决方法。

今天突然想玩玩装饰者模式。

这个模式行为是，给对象加一个新方法，在不改变对象原因有方法的基础上。

网上找到的示例代码如下：

function ABicycle(){ }
ABicycle.prototype = {
    wash : function(){ },
    ride : function(){ },
    getPrice : function(){ 
        return 999; 
    }
}

function bicycleBell( bicycle ){
    var price= bicycle.getPrice();

    bicycle.bell = function(){
        console.log("ding! ding! ding!");
    };

    bicycle.getPrice = function(){
            return price + 100;
    };
    return bicycle;
}

var bicycleA = new ABicycle();
bicycleA = bicycleBell( bicycleA );

我异想天开，想用函数的方法，且改变函数的原有结构。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>装饰者模式——函数式写法</title>
        <script type="text/javascript">
            function a1(){
                return 3;
            }
            
            function addA(aFn){
                var c= aFn();
                aFn = function(){
                    return c + 2;
                }

            }
            
//            function addA(aFn){
//                var c= aFn();
//
//                var aFnName = aFn.name;
//                eval(aFnName +' = function(){return c + 2;}');
//
//            }
//            
            console.log(a1());
            addA(a1);
            console.log(a1());
        </script>
    </head>
    <body>
        
    </body>
</html>