< Javascript > 클래스와 인스턴스

🔍 클래스와 인스턴스

객체 지향 프로그래밍은 하나의 모델이 가정하고, 그 모델을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다

• 클래스 : 하나의 모델 , 속성과 메소드를 정의한다
• 인스턴스 (인스턴스 객체) : 모델을 바탕으로 만들어진 객체

노트북을 예시로 들었을 때,
클래스 (a laptop) = 막연하게 문서 작업도 할 수 있고 넷플릭스도 볼 수 있고, 아무튼 노트북이란 것!
인스턴스 (the laptop) = 브랜드는 삼성이고, 색상은 흰색이고 화면은 터치가 되는 바로 그 노트북!

🎈 클래스 만드는 방법

• 클래스는 보통 대문자로 시작하며 일반명사로 만든다
• ES5에서는 함수로 정의했지만 ES6부터는 class로 정의할 수 있다

// ES5
function Laptop(brand, name, color) {
  this.brand = brand;
  this.name = name;
  this.color = color;
}

Car.prototype.bluetooth = function() {
  console.log (this.name + ' 블루투스 연결');
}

// ES6
class Laptop {
  constructor (brand, name, color) {
    this.brand = brand;  	//Laptop의 브랜드 = brand(매개변수)
    this.name = name;		//Laptop의 이름 = name(매개변수)
    this.color = color;		//Laptop의 색상 = color(매개변수)
  }
  
  bluetooth() {
    console.log (this.name + ' 블루투스 연결');
  }
}

여기서 보이는 함수는, 객체지향 프로그래밍에서 생성자 함수라고 한다
위의 코드는 노트북 생성자를 만든 것이다

속성 정의하기 - this 키워드

• 생성자 함수안의 this는 생성자 함수가 생성하는 객체를 의미
• 클래스를 사용해 인스턴스를 만들게 되면 this는 인스턴트 객체를 가리킨다
• 예시에서 매개변수로 넘어온 brand, name, color 등은 인스턴스 생성 시 지정하는 값이며, 위와 같이 this에 할당한다는 것은 만들어진 인스턴스에 해당 브랜드, 이름, 색상 속성을 부여하겠다는 의미다

메서드 정의하기

• ES5는 prototype이라는 키워드를 사용하여 메서드를 정의
• ES6에서는 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의

🎈 생성자 함수 (constructor)

• 객체를 생성하는(만들어내는) 함수
• 인스턴스가 만들어질 때 실행되는 코드
• 생성자 함수는 return값을 만들지 않음

🎃 생성자 함수의 필요성

• 동일한 속성 가지는 객체를 여러개 생성하기 위해서
• Prototype을 이용하여 메모리 절감을 위해서

🎃 생성자 함수의 형태

• 생성자 이름은 대문자를 사용 (일반 함수와의 구분을 위함)

// ES5
function <생성자 이름>(a, b, c) {
  this.속성1 = a;
  this.속성2 = b;
  this.속성3 = c;
}
<생성자 이름>.prototype.<메소드 이름> = function() {
  메소드 실행문;
}

// ES6
class <생성자 이름> {
  constructor(a, b, c){
  	this.속성1 = a;
  	this.속성2 = b;
  	this.속성3 = c;
  } 
  <메소드 이름>() {
    메소드 실행문;
  }
}

🔈 클래스 = 생성자 함수 ?
자바스크립트에서는 ES6 이전에는 Class가 없기 때문에 생성자 함수가 그 역할을 대신했었지만, ES6 덕분에 우리는 위 생성자 함수를 class 문법으로 쓸 수 있게 되었다

🎈 클래스 상속하기 (super / extends)

class 부모클래스 {
	constructor(변수1,변수2){
		this.변수1 = 변수1;
        this.변수2 = 변수2;
    }
    메소드(){
    	//기능
        ...
    }
}

class 자식클래스 extends 부모클래스 {
	constructor(변수1, 변수2, 변수3){
    	//super키워드로 부모클래스 생성자 호출
    	super(변수1,변수2);
        this.변수3 = 변수3;
    }
    메소드2(){
    	//부모 클래스의 메소드 호출
    	super.메소드();
        //추가할 자식 클래스만의 기능
        ...
    }
}

🎈 인스턴스 만드는 방법

• new 키워드를 사용하여 class의 인스턴스를 만들 수 있음
• 인스턴스를 만들면 즉시 생성자 함수가 실행됨

// class 생성
class Laptop {
  constructor (brand, name, color) {
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
  
  bluetooth() {
    console.log (this.name + ' 블루투스 연결');
  }
}

// 인스턴스 생성 (class 사용)
let mylap = new Laptop('lg', 'gram', 'white');
let brolap = new Laptop('apple', 'macbookPro', 'silver');

변수 안에 클래스의 설계를 가진 새로운 객체, 즉 인스턴스가 할당된 모습
각각의 인스턴스는 Laptop이라는 클래스의 고유한 속성과 메소드를 가진다

🔈 메소드
객체에 딸린 함수, 즉 어떤 객체가 가지고 있는 어떤 동작을 말한다
객체의 속성에 접근하고, 그 뒤에 소괄호를 붙여 메서드를 호출할 수 있다

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

// 인스턴스에서 속성 사용
mylap.color; 	//white
brolap.brand; 	//apple

// 인스턴스에서 메소드 사용
mylap.bluetooth; 	//gram 블루투스 연결