* 객체 지향 프로그래밍
하나의 모델이 되는 청사진을 만들고(class) Ex) Car
그 청사진을 바탕으로 한 객체(instance) Ex) Avante, mini를 만드는 프로그래밍 패턴
- 클래스는 함수로 정의될 수 있다.
"ES5"와 "ES6"에서 쓰는 방법이 약간 다르다.
함수를 정의할 때 첫 문자는 대문자를 쓰는 것이 좋다고 한다.
[ES5]
|
1
2
3
4
5
|
function Car(brand, name, color) {
// 인스턴스가 만들어 질 때 실행되는 코드
}
|
cs |
[ES6]
|
1
2
3
4
5
6
7
8
9
|
class Car {
constructor(brand , name, color) {
//인스턴스가 만들어 질 때 실행되는 코드
}
}
|
cs |
- new 키워드를 통해 클래스의 인스턴스를 만들어낼 수도 있다.
|
1
|
let avante = new Car('hyundai','avante','black');
|
cs |
(avante 즉, 인스턴스는 Car라는 클래스의 고유한 속성과 메소드를 가진다.)
-속성과 메소드(클래스에 속성과 메소드를 정의하고, 인스턴스에서 이용한다.)
그렇기 때문에 현실 세계를 기반으로 프로그래밍 모델을 만들 때에 유용하다고 한다.
- 아래는 클래스 속성의 예시이다.
[ES5]
|
1
2
3
4
5
6
|
function Car(brand, name, color) {
this.brand = brand ;
this.name = name;
this.color = color;
}
|
cs |
위의 그림의 Car는 class이고 this 객체는 sonata라고 보면 될 것 같다.
위 그림이 constructor (생성자) 함수가 된다.
|
1
2
3
4
5
6
7
|
Car.prototype.drive = function() {
console.log(this.name + '가 운전을 시작합니다');
}
let sonata = new Car('hyundai', 'sonata','white');
sonata.color; // 'white'
sonata.drive(); // 'sonata가 운전을 시작합니다'
|
cs |
위 그림의 Car.prototype 객체에 속성이나 메소드를 정의할 수 있다.
그리고 sonata가 instance가 된다.
[ES6]
|
1
2
3
4
5
6
7
|
class Car {
constructor(brand, name, color) {
this.brand = brand ;
this.name = name;
this.color = color;
}
}
|
cs |
- 아래는 클래스 메소드의 정의 예시이다.
[ES5]
|
1
2
3
4
5
6
7
|
function Car(brand, name, color) { }
Car.prototype.refuel = function () {
// 연료 공급 구현 코드 //
}
Car.prototype.drive = function () {
// 운전 구현 코드//
}
|
cs |
[ES6]
|
1
2
3
4
5
6
7
|
class Car {
construtor(brand, name, color) { }
refuel() {
}
drive() {
}
}
|
cs |
[ES5]와 [ES6]의 케이스를 놓고 보면 내가 편한 건 [ES6] 것 같다.
인스턴스에서는 아래와 같이 사용할 수 있다.
|
1
2
3
4
|
let sonata = new Car('hyundai', 'sonata', 'white');
sonata.color ; //'white'
sonata.drive(); // 소나타가 운전을 시작합니다
|
cs |
prototype : 모델의 청사진을 만들 때 쓰는 원형 객체라고 한다. 우리가 모르는 소스 코드를 찾을 때 자주 방문하는 MDN에 좌측을 보면 메소드들이 쭉 나열돼있는 가운데 ex) Array.prototype.indexOf()처럼 들어가 있는 경우인데 코드의 조상님으로 보면 된다고 한다.
constructor: 인스턴스가 초기화될 때 실행되는 생성자 함수이다.
this : 함수가 실행될 때 해당 scope마다 생성되는 고유한 실행 context new 키워드로 인스턴스를 실행했을 때에는 해당 인스턴스가 바로 this의 값이 된다고 한다.
'개념정리' 카테고리의 다른 글
| 개발자로의 커리어 전환 2주일... (1) | 2020.08.10 |
|---|---|
| 8/7[TIL]매개변수 (0) | 2020.08.07 |
| 8/6일 [TIL] 테스트 코드 (0) | 2020.08.06 |
| 8/5일 [TIL] (0) | 2020.08.05 |
| 8/3~8/4일 (1) | 2020.08.04 |
