클래스와 인스턴스

✨SEB FE

객체 지향 프로그래밍의 기초가 되는 클래스와 인스턴스에 대한 내용을 다뤄봅니다.

💡 Although the world is full of suffering it is full also of the overcoming of it.

---

📌 클래스와 인스턴스

클래스는 객체 지향 프로그래밍의 기본이 되는 객체 생성의 메커니즘으로 볼 수 있다.

객체 지향 프로그래밍을 간단하게 설명하자면 하나의 모델이 되는 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴

• 클래스
  하나의 모델이 되는 청사진 => Car

• 인스턴스
  청사진을 바탕으로 한 객체 => Audi, Nissan Volvo

🔍 클래스 정의

함수로 정의하거나(ES5) class 키워드를 사용하여 정의하며(ES6이후), 다른 함수와 구분을 위해 클래스의 이름은 파스칼 케이스를 사용한다.

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

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

🔍 인스턴스 생성

인스턴스를 만들 때에는 new 키워드를 사용한다. 즉시 생성자 함수가 실행되며, 변수에 클래스의 설계를 가진 새로운 객체, 즉 인스턴스가 할당된다. 각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖게 된다.

위의 클래스 생성에서 constructor()함수가 바로 생성자 함수이다. 인스턴스가 만들어질 때 성성된다.

let Audi_A6 = new Car('Audi', 'A6', 'siver');
let Nissan_370Z = new Car('Nissan', '370Z', 'red');
let Volvo_S90 = new Car('Volvo', 'S90', 'black');

new 키워드를 사용해 인스턴스를 생성할 때, 생성자 함수가 실행되고 변수에 클래스 설계를 가진 새로운 객체가 할당된다. 각각의 인스턴스는 Car라는 클래스의 고유한 속성과, 메소드를 갖는다.

🔍 속성과 메소드

클래스에서는 속성과 메소드를 정의하고, 인스턴스에서 이를 활용한다.

//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라는 키워드를 이용해 정의할 수 있다.
//클래스의 속성 정의
class Car{
	constructor(brand, name, color){
    	//인스턴스가 만들어질 때 실행되는 코드
      this.brand = brand;
  	  this.name = name;
      this.color = color;
    }
  //메소드 정의
  refuel(){}
  drive(){}
}


//인스턴스에서의 사용
let Audi_A6 = new Car('Audi', 'A6', 'siver');
Audi_A6.color; //siver
Audi_A6.drive(); //A6 운전을 시작합니다.
let Nissan_370Z = new Car('Nissan', '370Z', 'red');
Nissan_370Z.brand; //Nissan
Nissan_370Z.reduel() //360Z 연료를 공급합니다.

🔍 ES5와 ES6 에서의 class..

JavaScript는 프로토타입 기반 객체 지향 언어여서 생성자 함수와 프로토타입으로 객체 지향의 상속을 구현할 수 있다.! ES6이후에 새로운 클래스가 도입되었는데(class 키워드와 constructor를 사용한 class) 이를 더 많이 사용한다고.. !..!ㅎㅁㅎ

ES5(생성자 함수)와 ES6(Class) 에서의 class 비교 모던 자바스크립트 deep dive 참고

Class	생성자 함수
new 연산자 없이 호출할 경우 에러가 발생한다.	new 연산자 없이 호출하면 인반 함수로서 호출된다.
상속을 지원하는 extends와 super 키워드를 제공한다.	생성자 함수는 extends와 super 키워드를 제공하지 않는다.
호이스팅이 발생하지 않는 것처럼 동작한다.	함수 호이스팅과 변수 호이스팅이 발생한다.
클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며, strict mode를 해제할 수 없다.	생성자 함수는 암묵적으로 strict mode가 지정되지 않는다.

---

✨마무리

객체 지향과 클래스 부분! 익숙한듯.,. 어려운 개념..! ^ㅇ^ 그래서 공부하고 싶었던 부분인데 드뎧ㅎ 재밌당.. 코드로 직접 만들어보고싶네~.~ 객체 지향 프로그래밍에 대한 깊게 다룬 글은 다음 글에서 다룰거당! 역시 프로그래밍의 꽃.. 객체 지향! 역시 추상적인.. 개념 부분은 더 많이 읽어보고 반복 학습이 중요하다..