[코드스테이츠 TIL] 객체지향 Class & Instance & Prototype

[ Class 와 Instance ]

 

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

하나의 모델이 되는 청사진(blueprint)를 만들고 => class

그 청사진을 바탕으로 한 객체(object)를 만드는 => instance

프로그래밍 패턴을 의미한다.

 

 

[ class 정의 ]

//ES5 버전

function Car(brand, name, color) {
	//인스턴스가 만들어질 때 실행되는 코드
}


//ES6 버전

class Car() {
	constructor(brand, name, color) {
	//인스턴스가 만들어질 때 실행되는 코드
	}
}

 

[ new 키워드를 통해 class의 instance 만들기 ]

let avante = new Car('hyundai', 'avante', 'black');
let mini = new Car('bmw', 'mini', 'white')'

 

[ class의 속성과 메소드 ]

• 클래스에 속성과 메소드를 정의하고 인스턴스에서 이용한다
• 객체지향 프로그래밍은 현실세계를 기반으로 프로그래밍 모델을 만들 때 유용하다

속성 : 상태, 상황

// ES5 버전

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

//ES6 버전

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

 

메소드 : 액션, 행동

//ES5 버전

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

Car.prototype.refuel = function() {
//연료 공급 코드
}

Car.prototype.drive = function() {
//운전 코드
}


//ES6 버전

class Car() {
	constructor(brand, name, color){
	this.brand = brand;
	this.name = name;
	this.color = color;
	}
	refuel() {
	//연료 공급 코드
	}
	drive() {
	//운전 코드
}

 

인스턴스에서 사용하는 법

let avante = new Car('hyndai', 'avante', 'black');
avante.color;  // 'black'
avante.drive();  // 아반떼가 운전을 시작한다

let mini = new Car('bmw', 'mini', 'white');
mini.brand;  // 'bmw'
mini.refuel();  // 미니에 연료를 공급한다

 

 

[ Prototype ]

prototype : 모델의 청사진을 만들 때 쓰는 원형 객체

constructor : 인스턴스가 초기화될 때 실행하는 생성자 함수

this : 함수가 실행될 때 해당 scope마다 생성되는 고유한 실행 context (execution context_

-> new 키워드로 인스턴스를 생성했을 때는 해당 인스턴스가 바로 this의 값이 된다

 

 

 

• Array.something()는 Array 클래스에서만 작동
• Array.prototype.something()는 Array 인스턴스에서만 작동
  : Array 라는 프로토타입에 something 메소드를 추가한 것이다
• prototype
  인스턴스가 생성(instantiation)될 때 원형(original form), 즉 프로토타입(prototype)의 모양대로 인스턴스가 생성된다.
  인스턴스의 메소드는 Object.prototype.something으로 표현
  
  
• class 와 prototype
  Java Script는 prototype 기반 언어
  prototype을 기반으로 객체 지향 프로그래밍(OOP)를 흉내냈다
  문법적인 편의로 class란 keyword를 도입했다 (ES6)

 

function Car(model, brand) { 
  this.model = model; 
  this.brand = brand;
}

// car이라는 prototype에 ride라는 메소드를 추가하기
Car.prototype.ride = function() { 
  console.log("vroooom! " + this.model)
};

// spark와 avante라는 인스턴스에 ride 메소드 사용 가능
var spark = new Car("spark", "chevrolet");
spark.ride(); // "vrooom! spark"

var avante = new Car("avante", "hyundai");
avante.ride(); // "vrooom! avante"

 

• EXTENDING PROTOTYPE

JavaScript에서 기본적으로 제공되는 객체에 사용자 정의 메소드를 직접 추가할 수 있다. (그러나, 추천하지 않음)

메소드 확장은 다른 코드와 충돌을 일으킬 수 있기 때문이다.

Number.prototype.invert = function() { 
  return -(this)
}

var num = 5;
num.invert(); // -5