객체지향 문법

절차지향 코드의 불편한 점

- 여러개의 기능을 만들 때, 반복적으로 실행되는 공통의 기능들까지 일일이 코드를 입력해야 함

--> 해결방안: 이벤트+함수 형태 (반복되는 공통의 기능을 함수로 패키징해서 호출하는 식으로 재활용)

 

이벤트+함수 형태의 불편한 점

- 공통적인 기능 자체는 함수라는걸 이용해서 재사용 가능하지만 전역변수에 저장되는 선택자와 해당 선택자를 불러와서 연결하는 이벤트구문은 필연적으로 계속 반복적인 코드를 입력해야 함

 

객체지향

- 선택자와 이벤트를 통째로 함수와 같이 기능단위로 패키징 함

 

객체지향의 기본 개념

- 자주 사용되는 특정 기능을 멤버변수, 메서드 형식으로 패키징을 해서 해당 기능이 필요할 때마다 손쉽게 복사해서 재사용하기 위한 시스템적인 틀

 

생성자함수(constructor)

: 특정 기능의 복사본(인스턴스, 객체)을 생성하기 위한 특별한 함수

 

인스턴스(instance, 객체, 복사본)

: 생성자함수를 통해서 실제 복사가 되는 결과물

 

프로토타입(prototype)

: 생성자함수 생성시 자동으로 만들어지는 공통의 저장공간

: 같은 생성자함수로부터 생성된 모든 인스턴스들을 해당 생성자의 프로토타입 공간을 공유

 

생성자 함수 안쪽에서의 this

: 해당 생성자로 복사가 될 복사본 객체를 지칭(인스턴스)

 

this값이 위치해 있는 공간에 따라서 해당 값이 지칭하는 바가 달라짐

1. 이벤트문 안쪽에서는 이벤트가 발생한 대상을 지칭

2. each문 안쪽에서는 반복 돌고 있는 대상을 지칭

3. ajax문 안쪽에서는 비동기서버통신으로 반환된 data값 지칭

4. setTimeout 안쪽에서는 윈도우 객체를 지칭

 

엄밀하게 정의하면 생성자함수 안쪽의 this는 생성자 자신을 지칭

생성자함수가 new를 이용해서 인스턴스가 복사가 되는 순간, 인스턴스 지칭

 

.bind()를 이용하여 함수 안쪽에 있는 this 값을 원하는 값으로 고정할 수 있음

(이벤트문 밖에서 .bind(this)를 적용할경우 안쪽의 this값을 인스턴스로 고정)

 

일반 이벤트+함수형 코드를 객체지향으로 변경하는 단계별 순서

1. 전역변수와 이벤트문을 함수로 묶어줌 (함수의 이름은 대문자로 시작)

2. 전역변수에 있는 var를 지우고 this.를 붙여줌, 이벤트문도 동일

3. this가 다음의 4가지 경우에 속할 때는 겉의 함수 뒤에 .bind(this)를 붙여줌

(이벤트문, ajax문, each문, setTimeout)

4. 함수 선언문은 무조건 생성자함수이름.prototype.함수이름 = function(){} 형태로 변경

5. 생성자함수 안쪽에 있는 상수값을 인수로 전달받게 처리

6. 생성자함수를 new로 호출하면서 원하는 값을 인수로 전달