21.7.20 TIL (객체지향, 프로토타입)

객체 지향 프로그래밍

객체 지향 프로그래밍(OOP, Object-oriented programming)은 데이터와 기능을 한 곳에 묶어서 처리한다
속성과 메소드가 하나의 "객체"라는 개념에 포함되고 자바스크립트 내장타입 객체와는 다르게 ,클래스(class)라는 이름으로 부른다

oop에서 객체는 데이터와 기능이 클래스로 캡슐화 된 컴퓨터 자원의 묶음을 객체라고 한다

객체지향 프로그래밍은 하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다
인스턴스 객체를 만들때는 그림과 같이 new 키워드를 사용
class를 정의 할때는 일반적인 함수와 다르게 이름을 대문자, 일반명사로 짓는다

클래스, 인스턴스 정의

// ES5 문법으로 정의한 클래스
function Car(brand, name, color) {
	// 인스턴스 객체가 만들어질 때 실행되는 코드
}

// ES6 문법으로 정의한 클래스
class Car {
  constructor(brand, name, color) {
 	// 인스턴스 객체가 만들어질 때 실행되는 코드   
  }
}  

보기와 같이 최근에는 es6문법으로 클래스를 정의.
인스턴스가 만들어질때 생성자(constructor) 함수 내부가 실행 (생성자 함수는 return값을 만들지 않는다)

let avante = new Car('hyundai', 'avante', 'black')

인스턴스를 만들 때는 new키워드 사용, 변수에 클래스의 설계를 닮은 새로운 인스턴스 객체가 할당된다
인스턴스는 Car 클래스의 고유한 속성과 메소드를 갖는다

this 키워드

this는 생성되는 인스턴스 객체를 의미

class Car {
  constructor(brand, name, color) {
	this.brand = brand;
    this.name = name;
    this.color = color;
  }
}

매개변수로 넘어온 브랜드, 이름, 색상은 인스턴스 생성시 지정하는 값
위와 같이 this에 할당한다는 것은, 만들어진 인스턴스에 해당 브랜드, 이름, 색상을 부여하겠다는 의미

메소드 정의

es5에선 prototype 키워드를 통해 메소드를 정의할 수 있다

// es5문법으로 클래스에 메소드 정의
function Car(brand, name, color) {
  
}
Car.prototype.refuel = function() {
  
}
Car.prototype.drive = function() {
  
}


// es6문법으로 클래스에 메소드 정의
class Car {
  constructor(brand, name, color) {
  
  }
  refuel() {
    
  }
  drive() {
    
  }
}

Car 클래스에 메소드를 추가하려면 es5문법에서는 Car.prototype.refuel과 같이 프로토타입을 이용한다
es6에서는 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의한다 refuel() {} , drive() {}

인스턴스에서 속성과 메소드 사용

let avante = new Car('hyundai', 'avante', 'black')
avante.color   // 'black'
avante.drive();   // 메소드 사용

객체.메소드() 의 형태로 객체 내에서 메소드 호출