模块模式与构造函数

时间:2012-03-26 19:04:17

标签: javascript constructor module design-patterns private

我'我尝试将模块模式与构造函数结合起来,但似乎我是'我看着什么。 实例化两个对象并显示它们的属性后,实例var'似乎引用了同一个对象。

这是我放在一起的一个小例子。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     
        <title>test</title>

        <script type="text/javascript">
            var guidUtils = {
                /* Generates a simple UUID/GUID based on some randomisation.
                 *
                 */
                guidGenerator:function () {
                    var S4 = function () {
                        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
                    };
                    return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
                }
            };


            var Car = (function () {

                // private variables and functions
                var thiz;
                var ID = 'bar';
                var model;

                var setID = function(id){
                    ID = id;
                };

                var getID = function(){
                    return ID;
                };

                var  setModel = function(pModel){
                    model = pModel;
                };

                var  getModel = function(){
                    return model;
                };

                // constructor
                var Car = function (pModel) {
                    thiz=this;
                    ID = guidUtils.guidGenerator();
                    model = pModel;
                    init();
                };

                //intialisation
                function init(){

                }

                // prototype
                Car.prototype = {
                    constructor: Car,
                    getID: getID,
                    getModel: getModel

                };

                // return Car
                return Car;
            })();

            function show() {
                var car1 = new Car("audi");
                var car2 = new Car("BMW");
                var car1div = document.getElementById("car1");
                var car2div = document.getElementById("car2");
                car1div.innerHTML=car1.getID()+" is a "+car1.getModel();
                car2div.innerHTML=car2.getID()+" is a "+car2.getModel();
            }

        </script>       
    </head
    <body>
        <a onclick="show()" href="javascript:void(0);">show</a>
        <div id="car1"></div>
        <div id="car2"></div>
    </body>
</html>

结果是:

screenshot of result

有些人可以解释我到底在哪里吗?做出错误的假设?

1 个答案:

答案 0 :(得分:3)

 var thiz;
 etc... 
    // constructor
    var Car = function (pModel) {
        thiz=this;
        etc...

是问题所在。这会创建一种静态变量,由类的所有实例共享。所有实例方法和属性都必须绑定到原型this。例如:

    var Car = function (pModel) {
        this.ID = guidUtils.guidGenerator();
        this.model = pModel;
        this.init();
    };

    // Removed: "var setID = " Instead, bind it to the prototype:
    Car.prototype.setId = function(id){
        this.ID = id;
    };

另见:

相关问题