생성자가있는 모듈 패턴

모듈 패턴을 생성자 함수와 결합하려고 시도했지만 뭔가 이상하게 보입니다. 두 개체를 인스턴스화하고 속성을 표시 한 후에 두 인스턴스 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

몇 가지 내가 잘못된 가정을하고있어 정확한 위치를 설명 할 수 있을까요?

출처

2012-03-26 Peter De Winter

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; 
    };

참조 : 이해

출처

2012-03-26 19:08:28

, 그래서 속성을 캡슐화하는 것은 불가능하다? –

@ Neomusashi 캡슐화한다는 것은 무엇을 의미합니까? 그들을 "비공개"로 만들었습니까? 가능한 것이지만 모든 변수는 ** 자동차 내에서 정의되어야합니다 **. –

나는 이제 이해할 것 같아. 감사. 단, 인스턴스를 인수로 전달하지 않으면 접근 자 메서드를 사용하여 이러한 전용 변수를 노출 할 수 없습니다. –

생성자가있는 모듈 패턴

답변

관련 문제