[javascript] 객체지향 - 클래스와 인스턴스

클래스와 인스턴스

객체지향 프로그래밍은 하나의 모델이 되는 청사진(class)을 만들고 그걸 바탕으로 한 객체(instance)를 만드는 프로그래밍 패턴이다. ex) 청사진 Tv와 객체 SamsungTv, LgTv

클래스는 다른 함수와 구분하기 위해 대문자로 시작하며 클래스명을 명사로 만든다. 함수는 일반적으로 소문자로 시작하며 함수명을 동사로 만든다.

function Car(brand){}

class Car {
	constructor(){};  
}

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

let blackCar = new Car("black");
let redCar = new Car("red");

⭐ ES5와 ES6의 차이점 ⭐

아래 코드에 있는 함수를 객체지향 프로그래밍에서 생성자 함수라고 부른다. 인스턴스가 만들어질 때 실행되는 코드로 return 값을 만들지 않는다.

this는 인스턴스 객체를 의미한다. 파라미터로 넘어온 값들은 인스턴스 생성시 지정하는 값이며 아래 코드처럼 this에 할당한다는 것은 만들어진 인스턴스에 해당 값을 할당하겠다는 의미이다.

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

// ES5에서는 prototype 키워드를 사용해야 메서드를 정의할 수 있다.
Car.prototype.drive = function(){}

======================================================
 
// ES6에서는 클래스를 class라는 키워드를 사용해 정의할 수 있다.
class Car {
	constructor(brand, name, color){
    	// 인스턴스가 만들어질 때 실행되는 코드
      	this.brand = brand;
      	this.name = name;
      	this.color = color:
    };
    // ES6에서는 메서드를 생성자 함수와 함께 class 안쪽에 묶어서 정의한다.
  	drive(){}
}

======================================================
  
// 인스턴스에서의 사용
let avante = new Car("hyundai", "avante", "black");
avante.color; // black
avante.drive(); // 아반떼가 운전을 시작합니다.

🤔 prototype? constructor? this?

• prototype : 모델의 청사진을 만들 때 쓰는 원형 객체(original form)
• constructor : 인스턴스가 초기화될 때 실행하는 생성자 함수
• this : 함수가 실행될 때, 해당 스코프마다 생성되는 고유한 실행 컨텍스트(execution context) new 키워드로 인스턴스를 생성했을 때에는 해당 인스턴스가 바로 this의 값