[JavaScript] 객체 지향 자바스크립트

객체 지향 프로그래밍(Object Oriented Programing) 란?

객체 지향 프로그래밍이란, 즉 C언어와 같은 절차 지향적인 프로그래밍이 아닌 프로그램을 객체들의 모임으로 파악하고자 하는 프로그래밍의 패러다임 중 하나이다.

이 그럼 처럼 하나의 모델이 되는 Car를 만들고, 이 Car를 바탕으로 한 객체를 만드는 프로그래밍 패턴이다. 여기서 Car는 class를 의미하고 Car를 바탕으로 한 객체는 instance가 된다.

//ES5 : 클래스는 함수로 정의할 수 있다.
function Car(brand, name, color, fuel) {
  // 인스턴스가 만들어질 때 실행 되는 코드
}

//ES6 : class라는 키워드를 이용해 정의할 수도 있다.
class Car {
  constructor(brand, name, color, fuel) {
    // 인스턴스가 만들어질 때 실행되는 코드
}

이렇게 하나의 모델이 되는 Car를 만들었다. 그렇다면 자바스크립트에서 인스턴스는 어떻게 만들어야 할까?
바로 new 키워드를 사용해서 인스턴스를 생성할 수 있다.

let avante = new Car('hyubdai', 'avante', 'black', 'deisel');
let modelX = new Car('tesla', 'modelX', 'white', 'electricty');
let mini = new Car('bmw', 'mini', 'red', 'deisel');
//각각의 인스턴스는 Car라는 클래스의 고유한 속성과 메서드를 갖는다.

속성과 메서드

클래스에 속성과 메서드를 정의하고, 인스턴스에 사용을 해야한다.

속성	메서드
brand	drive()
name	setSpeed()
color	refuel()
fuel

속성과 메서드의 정의

//ES5

function Car(brand, name, color, fuel) {
  this.brand = brand;
  this.name = name;
  this.color = color;
  this.fuel = fuel; //속성 정의
}

Car.prototype.drive = function() { //메서드 정의
  //운전을 구현하는 코드
}

//ES6

class Car {
  constructor(brand, name, color, fuel) {
    this.brand = brand;
    this.name = name;
    this.color = color;
    this.fuel = fuel; //속성 정의
  }
  drive() { // 메서드 정의
    console.log(`${this.name}가 운전을 시작합니다.`); 
  }
}

여기서 속성을 정의할 때 this를 사용한다. this를 사용하는 이유는 고유의 속성을 가지게 하기 위해서 이다.

let avante = new Car('hyubdai', 'avante', 'black', 'deisel');
avate.color; //black
avate.drive(); //avante가 운전을 시작합니다.
let modelX = new Car('tesla', 'modelX', 'white', 'electricty');
modelX.color; //white
modelX.drive(); //modelX가 운전을 시작합니다.

이 처럼 avante나 modelX는 동일하게 Car가 가지고있는 속성을 가지고 있지만 this를 사용했기 때문에 값은 각각 다르다.

this	constructor	prototype
함수가 실행될때, 해당 Scope마다 생성되는 고유한 실행 context new 키워드로 인스턴스를 생성했을 때에는 해당, 인스턴스가 바로 this의 값이 된다.	인스턴스가 초기화 될 때 실행되는 생성자 함수당	모델의 청사진을 만들때 쓰는 원형 객체