javascript_jquery_basic_3_3

클래스 중급

this의 정체

this란?
this는 일반적으로 메서드를 호출한 객체가 저장되어 있는 속성

this가 만들어지는 경우	this 값
일반 함수에서의 this	window 객체
중첩 함수에서의 this	window 객체
이벤트에서 this	이벤트를 발생시킨 객체
메서드에서 this	메서드를 호출한 객체
메서드 내부의 중첩함수에서 this	window 객체

메서드 내부의 중첩함수에서 this

메서드 내부의 중첩함수에서의 경우 this를 저장하지 않으면 window 객체가 this가 된다.

함수호출() vs. new 함수호출()

구분	함수이름()	new 함수이름()
해석	일반 함수 호출하는 구문	특정 클래스의 인스턴스를 생성하는 구문
this 내용	window 객체	인스턴스

자바스크립트 생성자 패턴 - new를 강제하는 패턴
Auto-instantiation in Effective JavaScript

함수단위코딩 vs. 클래스 단위 코딩

함수 단위 코딩

• 함수 호출마다 함수가 중복해서 만들어지는 단점이 있다.
• 외부에서 내부 속성과 함수를 접근할 수 없다.

함수 단위 코딩2

• 특정 메소드나 프로퍼티를 반환하여 외부에서 사용할 수 있도록 하는 방법

클래스 단위 코딩(프로토타입 기반)

• 프로토타입 객체를 공유하므로 여러 개의 인스턴스에서 메서드를 공유해서 사용한다.
• 인스턴스를 생성하면 프로퍼티와 메서드를 외부에서 접근할 수 있는 구조가 된다.

인스턴스 프로퍼티와 메서드 vs. 클래스 프로퍼티와 메서드

인스턴스 프로퍼티/메서드
객체의 상태 정보를 담거나 다뤄야 하는 경우에 사용 (일반적으로 사용)

클래스 프로퍼티/메서드
독립적으로 실행 가능한 유틸리티성 정보와 기능을 구현 할 떄 사용 (유틸리티로 사용)

// 안전한 유틸리티 클래스 만들기
// http://stackoverflow.com/questions/35537760/utility-class-for-functions
var Utils = (function(){
 return {
    test: function () { },
    test1: function () { }
 }
}());

// https://gualtierotesta.wordpress.com/2013/06/25/utility-functions-in-javascript/
function Util () {}
 
Util.read = function (sel) {
    return jQuery(sel).val();
};
 
Util.write = function (sel, val) {
    jQuery(sel).val(val);
};

객체지향 프로그래밍으로 유틸리티 클래스를 대체하자

패키지

연관 있는 클래스를 묶을 때 사용, 오브젝트 리터럴을 이용해서 선언

// 유틸리티 성격의 클래스 그룹
var ddan = {};
ddan.utils = {};
ddan.utils.String = function(){};
ddan.utils.Format = function(){};

// UI 콘트롤 클래스 그룹
var ddan
ddan.ui = {};
ddan.ui.ImageSilder = function() {};
ddan.ui.tabMenu = function() {};
ddan.ui.tabPanel = function() {};

// http://stackoverflow.com/questions/2504568/javascript-namespace-declaration
// 일반적으로 자주 사용하는 방법
var Namespace = {};
Namespace.MyClass = (function () {
  // ...
}());

// 복잡하지만 유연하게 사용하는 방법
var Namespace = (function (Namespace) {
   Namespace.MyClass = function() {

       var privateMember = "private";
       function myPrivateMethod(param) {
         alert(param || privateMember);
       };

       MyClass.MyPublicMember = "public";
       MyClass.MyPublicMethod = function (param) {
          myPrivateMethod(param);
       };
   }
   return Namespace
}(Namespace || {}));

네임스페이스 패턴 바로 알기