간략한 JavaScript OOP 클래스

Question

나는 "엄격한 사용"을 적용하고 SO post에서 가져온 John Resig의 간단한 OOP Class을 사용하고 있습니다. 모든 예에서
나는과 같이 Class.extend의 사용을 참조하십시오

var MyObj = Class.extend({ 
    init:function(){}, 
    prop: "Property" 
}); 

하지만 그런 방법으로 그것을 사용하는 나를 위해 큰 단점을 발견 - 나는 "개인"변수를 가질 수 없습니다, 그래서 매장 기준으로 할 수 없습니다 this은 var $this = this;입니다. 내 경우에 대한 해결책을 발견, 지금은 다음과 같은 방법으로 Class.extend를 사용 : 내 경우에는 작동

var MyObj = Class.extend(new function(){ 
    var $this = this; 
    this.init = function(){}; 
    this.prop = "Property"; 
}); 

다,하지만 난 알고 싶은 경우 장기적으로 나에게 문제가 발생할 수 있습니다 몇 가지 ?
내 응용 프로그램이 브라우저에서 더 많은 메모리를 소비하게됩니까?
내 요구 사항을 구현하기 위해 어떤 대안을 사용할 수 있습니까?

주 : 나는 주로 이벤트와 콜백을 사용하기 때문에 나는 $이를 저장해야하는, 그래서 난 "원래"참조 할 this 개체의 모든 메서드와 속성에 액세스하기 쉬운.

편집는 :

(function() { 
    "use strict"; 
    window.QuickPlay = Class.extend(new function() { 
     var $this = this; 

     this.init = function (initData) { 
      $this.elementsToHide.push(initData.el); 
      $(function() { 
       playProcessStart(); 
       Sys.Application.add_load(function() { 
        $find("ctl00_ContentPlaceHolderMain_ctrlPlayPopup1").add_closed(function() { $this.setElementsVisibility(""); }); 
       }); 
       $this.setElementsVisibility("hidden"); 
      }); 
     }; 

     this.elementsToHide = []; 

     this.setElementsVisibility = function (visibility) { 
      $.each($this.elementsToHide, function (i) { 
       $("#" + this).css("visibility", visibility); 
      }); 
     }; 
    }); 
}()); 

Answer 1

나는 "개인"변수를 가질 수 없습니다

물론

당신이 할 수있는 . (현재 불필요한) (function() { … }()); 래퍼 또는 생성자 (init 건).

new function() { 

Avoid that pattern!은 당신이 정말로 그것을 지금처럼 작동

(function() { 
    "use strict"; 
    // Here's the place where you could put a private, static variable 
    // for example `var elementsToHide = [];` 
    var $this = { 
     init: function (initData) { 
      $this.elementsToHide.push(initData.el); 
      $(function() { 
       playProcessStart(); 
       Sys.Application.add_load(function() { 
        $find("ctl00_ContentPlaceHolderMain_ctrlPlayPopup1").add_closed(function() { 
         $this.setElementsVisibility(""); 
        }); 
       }); 
       $this.setElementsVisibility("hidden"); 
      }); 
     }, 
     elementsToHide: [], 
     setElementsVisibility: function (visibility) { 
      $.each($this.elementsToHide, function (i) { 
       $("#" + this).css("visibility", visibility); 
      }); 
     } 
    }; 
    window.QuickPlay = Class.extend($this); 
}()); 

내가 나에게 문제를 일으킬 수있는 몇 가지가 있는지 알고 싶어 사용하도록 코드가 필요한 경우

예. 복수 인스턴스는 거의 모두 작동하지 않을 것입니다. 모두 동일한 elementsToHide 배열을 참조하기 때문입니다. 그리고 (클래스의 생성자와 정적 요소에서만) 인스턴스 메서드를 사용하지 않으므로 클래스 패턴이 매우 불필요한 것처럼 보입니다. 대신 a module을 사용하십시오.단일 인스턴스 (및 클래스)가 필요한 경우 코드는 다음과 같아야합니다.

"use strict"; 

window.QuickPlay = Class.extend({ 
    init: function (initData) { 
     var $this = this; 
     this.elementsToHide = []; 
     $(function() { 
      playProcessStart(); 
      $this.elementsToHide.push(document.getElementById(initData.el)); 
      Sys.Application.add_load(function() { 
       $find("ctl00_ContentPlaceHolderMain_ctrlPlayPopup1").add_closed(function() { 
        $this.setElementsVisibility(""); 
       }); 
      }); 
      $this.setElementsVisibility("hidden"); 
     }); 
    }, 
    setElementsVisibility: function (visibility) { 
     $(this.elementsToHide).css("visibility", visibility); 
    } 
}); 

Answer 2

당신은 모듈 패턴을 사용하는 모든 OOP를 유지할 수 있습니다 : 요청,이 내 코드의 예입니다. 이러한 종류의 패턴은 코드의 보안과 조직 성을 향상시킵니다. 상속 및 모듈 패턴 작업 방법 JsFiddle

에서

//these are namespaces in javascript 
window.project = window.project || {}; //this kind declarations prevents recreate the object 
project.group = project.group || {}; 

//in the line below we can use $ instead jQuery, and use window and document instead ask for the browser every time. 
(function (window, document, $) { 
    "use strict"; 

    project.group.NameOfYourModule = function() { 
     var privateAttribute = true, 
      students = 32, //It's is a best practice declare everything in an unique var. 

      privateMethod = function() { 
       alert('Now I know OOP using jQuery'); 
      }; 

     return { 
      init: function() { 
       //this is a public method and we can initiate some private method; 
       privateMethod(); 

       //we call a public method using this 
       this.publicMethod(); 
      }, 
      publicMethod: function() { 
       //this is a public method 
      } 
     }; 
    }; 

    $(function() { 
     var myclass = new project.group.NameOfYourModule(); //instantiate you class 
     myclass.init(); //initiate some public method 
    }); 
}(window, document, jQuery)); 

• 작업을 예를 here