Javascript / 기초 / 객체지향 (Object-oriented)

객체지향 프로그래밍의 기초는 다음 글을 통해 파악할 수 있다.

- 객체지향 프로그래밍

 

이 글은 기초 파악 후 Javascript에서의 객체지향 프로그래밍 방법에 대해 알기 위한 내용이 담긴 글이다.

 

 

간단하게, 객체는 동일한 속성을 갖는 변수들을 정의하기 위해서 사용한다.

동일한 속성을 갖는 집합체를 Class라 하고, Class의 객체들을 인스턴스(Instance)라 한다.

Class는 속성과 메소드를 사용한다.

 

ex)

Car 객체 : brand, speed라는 속성을 갖고, speedUp이라는 메소드를 가짐.

  속성 : Car1 = 'H사, 100km/h', Car2 = 'T사, 50km/h'

  메소드 : Car1.speedUp(10) : 110 km/h, Car2.speedUp(50) : 100 km/h

 

 

---

 

 

1. 인스턴스(Instance) 생성 방법 (ES6)

 

변수명 = new Class명('속성1', '속성2', ...) 으로 작성 해준다.

new는 인스턴스 생성자라고 일단 이해하면 된다.

 

function SmartPhone(brand, color, price) {
}
let iPhoneX = new SmartPhone('apple', 'black', '$1000');
 
iPhoneX  // 결과 : SmartPhone {}

---

 

2. 메소드 생성 방법

 

Class이름.prototype.method이름 = function() {
  Class의 속성을 활용하여 실행하고 싶은 구문 작성
}

// class 및 instance 생성
 
function SmartPhone(brand, color, price) {
  this.bbrand = brand;
  this.ccolor = color;
  this.pprice = price;
}
 
let iPhoneX = new SmartPhone('apple', 'black', '$1000');
let GalaxyS20 = new SmartPhone('samsung', 'red', '$999');
 
 
// expensive method 정의
 
SmartPhone.prototype.expensive = function() {
  console.log(this.pprice + '? 비싸다..');
}
 
// expensive method 호출
 
iPhoneX.expensive();  // 결과 : '$1000? 비싸다..'
GalaxyS20.expensive(); /// 결과 : 'S999? 비싸다..'

this

 

의도적으로, class를 생성할 때 this.bbrand와 같이 파라미터의 맨 앞글자를 두번 적어주었다.

 

this는 간단히 말하자면, 향후 작성될 instance의 이름 대신 쓰는 것 이다.

 

Instance로서 class를 호출할 때, "instance이름.속성이름"가 되어야하는데,

class를 정의하면서 instance이름이 뭐가될지 알 수 없으니, instance 이름 대신 this를 쓰는 것이다.

ex) iPhoneX.pprice == this.pprice,  GalaxyS20.pprice == this.pprice

 

그리고 이렇게 정의한 this.속성이름이 class의 속성(파라미터)을 가리키도록 한 것이다.

ex) iPhoneX.pprice = price;

 

보통은 this.price = price; 등으로 이름을 같게 써준다.

 

---

Prototype, Constructor

 

Prototype은 Class를 만들때 사용하는 원형 객체(original form)이다. (아래 2. Class 예제 - 배열에서 예제 확인)

Constructor는 ES6에서 Class를 만들때 사용한 함수로, 인스턴스가 초기화될 때 실행하는 생성자 함수이다.

 

prototype과 constructor에 대한 구체적 이해를 위해서는 Inheritance(상속) 개념을 이해할 필요가 있다.

Javascript / 객체 / Inheritance (상속)

 

 

 

---

 

함께보면 좋은 내용

1) MDN : 객체지향 자바스크립트 개요

developer.mozilla.org/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

 

2) 주니어 개발자의 끄적임 - OOP의 5원칙과 4가지 특징

velog.io/@ygh7687/OOP%EC%9D%98-5%EC%9B%90%EC%B9%99%EA%B3%BC-4%EA%B0%80%EC%A7%80-%ED%8A%B9%EC%84%B1