자바스크립트 생성자함수, 프로토타입을 활용한 객체지향 프로그래밍

constructor (생성자함수), prototype(프로토타입)을 활용한 객체지향 프로그래밍

 

[의미, 뜻]

생성자함수(통칭 ES6에서의 클래스)

- 어떤 반복적인 대량의 결과물을 뽑아내기 위한 시스템적인 룰

(붕어빵을 찍어내기 위한 붕어빵틀)

 

 

인스턴스(instance) - 객체

- 생성자 함수를 통해서 복사가 된 실제적인 결과물 혹은 복사본

(붕어빵틀을 통해서 찍어낸 개별 붕어빵틀)

 

 

프로토타입

- 생성자함수를 만들면 자동으로 생성되는 공통의 저장공간

- 동일한 생성자함수를 통해서 복사된 인스턴스들은 동일한 프로토타입을 공유한다.

- 보통 자주쓰는 함수(메서드)들을 프로토타입이라는 공통의 저장공간에 등록하여 모든 인스턴스들이 해당  메서드를 공유하도록 함

 

--> 함수를 여러 개 등록하면 메모리 공간을 많이 차지하여 메모리를 낭비하게 된다.

--> 객체 생성자 함수에 프로토타입을 사용하여 함수를 등록하면 메모리 낭비를 줄일 수 있다.

 

 

생성자함수로 인스턴스 생성하는 법

1. new 연산자를 이용해서 인스턴스를 생성하는 함수, 무조건 제일 먼저 실행될 함수 (생성자함수)

-- 호출될 때 받은 인자값을 인스턴스로 전달해줌 (this를 이용해서 전달)

-- 생성자 함수 전용의 공간인 prototype을 생성 (모든 인스턴스를 prototype에 저장된 값을 공유)

-- 공통으로 쓰이게 될 값이나 함수(메소드)들은 무조건 prototype에 저장시킴

 

 

 

※ 호출위치에 따른 this의 참조값

1. 일반 함수 안쪽에서의 this -> window 객체

2. 이벤트 안쪽에서의 this -> 이벤트가 발생한 그 대상

3. 생성자 함수 안쪽에서의 this -> 인스턴스

4. 일반 객체 안쪽에서의 this -> 객체 자기자신을 지칭

 

 

 

 

 

 

[객체 생성자 함수의 활용- 기본형]

 

 

 

 

 

[객체 생성자 함수의 활용- 예제] togglemenu

1. 생성자 함수 정의 - init, bindingEvent 호출

2. init, bindingEvent, activation 을 prototype에 저장

주의 - bindingEvent안의 this는 인스턴스 지칭, 이벤트구문안의 this는 이벤트대상이므로 지역변수로 처리하여 오류방지

//1.생성자함수 정의
function Toggle(selector) {
    //init과 bindingEvent를 호출
    this.init(selector);
    this.bindingEvent();
}

//2.init을 prototype에 저장
Toggle.prototype.init = function(selector) {
    //전역변수 DOM
    this.frame = $(selector);
    this.btns = this.frame.find("dt");
    this.boxs = this.frame.find("dd");
}

//3.bindingEvent를 prototype에 저장
Toggle.prototype.bindingEvent = function() {
    var self = this; //인스턴스this
    //인스턴스 this와 이벤트 구문안의 this가 같으므로 지역변수로 다르게 처리
    //--> var self = this; 이부분 말하는거
    self.btns.on("click", function(e){
        e.preventDefault();
        self.activation(this);
    });
}

//4.bindingEvent 구문안의 activation 함수도 prototype에 등록
Toggle.prototype.activation = function(self) {
    var isOn = $(self).hasClass("on");
    this.btns.removeClass("on");
    this.boxs.slideUp("on");

    if(isOn) {
        $(self).removeClass("on");
        $(self).next().slideUp();
        return;
    }
    $(self).addClass("on");
    $(self).next().slideDown();
}

 

 

 

 

[객체 생성자 함수의 활용- 플러그인 만들기]

1. ()()즉시실행함수 안쪽에 모든 코드를 집어넣는다.

2. $.fn에 플러그인 등록 - 인스턴스 만들기

 

3. 옵션 추가시 $.default 만들고 플러그인 안에서 $.extend로 옵션합치기

4. 생성자함수, init, activation 등에 option 적용

 

 

 

 

 

 

[블로그참고]

https://blog.naver.com/gurwns6939/222039413489