자바스크립트 : 객체지향 프로그래밍

Young-mason·2020년 10월 15일

~~현재 문서는 학습 진도에 따라 계속 업데이트 해나갈 예정입니다~~!

객체지향 프로그래밍이란?

Mdn 문서를 살펴보겠습니다

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call

객체 지향 프로그래밍 (Object-oriented Programming)

객체지향 프로그래밍은 실제 세계에 기반한 모델을 만들기 위해 추상화를 사용하는 프로그래밍 패러다임이다.

객체지향 프로그래밍은 함수들의 집합 혹은 단순한 컴퓨터의 명령어들의 목록 이라는 기존의 프로그래밍에 대한 전통적인 관점에 반하여, 관계성있는 객체들의 집합이라는 관점으로 접근하는 소프트웨어 디자인으로 볼 수 있다.

객체지향 프로그래밍은 보다 유연하고 유지보수성이 높은 프로그래밍을 하도록 의도되었고, 대규모 소프트웨어 공학에서 널리 알려져 있다.

객체지향 프로그래밍이란 하나의 모델이 되는 청사진(blueprint)를 만들고 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴입니다.
자바스크립트에서는 이 청사진을 class라고 부르고, 해당 객체를 instance라고 부릅니다.

class 및 property 정의

class를 정의할 때 class임을 명시하기 위해 첫 문자를 대문자로 써주는게 좋습니다.

// 1. ES5에서 class는 함수로 정의할 수 있습니다.

function Car(brand, name, color) {
	this.brand = brand;   
  	this.name = name;
  	this.color = color;  // -> constructor
}

// 2. ES6에서는 class 키워드를 이용해서 정의할 수 있습니다

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

instance 만들기

new 키워드를 통해 클래스의 인스턴스를 만들어낼 수 있습니다.

let avante = new Car('hyundai', 'avante', 'black')
let mini = new Car('bmw', 'mini', 'red')
let beetles = new Car('volkswagen', 'beetles', 'black')

class 메소드 정의

//ES5
function Car(brand, name, color){	 /* 생략 */ }

Car.prototype.refuel = function() {
	// 연료 공급을 구현하는 코드
}

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

//ES6
class Car() {
	constructor(brand, name, color) { /* 생략 */ }
	
	refuel() {
	}
	
	drive() {
	}
}