class & instance (feat. OOP, ES6)

 class와 instance의 개념을 잘 잡아둬야 나중에 후회하지 않는다...

class와 instance에 대해 알아보자

 

class

먼저 알아야 할것은 객체지향 프로그램이이다.

객체 지향 프로그래밍(OOP)은 하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다.

위의 설명에서 하나의 모델이 되는 청사진을 => class

그 청사진을 바탕으로 한 객체를 => instance

 

우리가 아는 객체와는 구분을 지어야 한다. 

그냥 객체가 아니라 청사진을 바탕으로한 객체를 instance(object)라고 하고

청사진을 클래스(class)라고 한다.

 

*ES5에서는 클래스는 함수로 정의 했고, ES6에서는 class라는 키워드로 정의한다. 

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

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

• class는 대문자를 사용하며 일반 명사를 쓴다.
• constructor인 생성자 함수가 필요하며
• ES5의 클래스에 필요했던 인자는 constructor의 인자로 들어간다.
• constructor는 return값을 만들지 않는다

 

instance

• 인스턴스를 만들때는 new 키워드를 사용한다.
• 즉시 생성자 함수(constructor)가 실행되며, 변수에 class의 설계를 가진 새로운 객체, 즉 인스턴스가 할당됩니다.

let sonata = new Car('hyundai', 'sonata', 'black')
let k5 = new Car('kia', 'k5', 'white')

• 각각의 인스턴스는 Car라는 고유의 클래스와 메서드를 갖는다.

여기서 속성과 메서드의 구분이 필요하다.

// * ES6의 속성과 메서드
// class의 속성
class Car {
	constructor(brand, name, color) {
    	this.brand = brand;
        this.name = name;
        this.color = color;
    }
}
// class의 메서드
class Car {
	constructor(brand, name, color) {
    	// 생략
    }
    refuel() {
    	// 연료 공급을 구현하는 코드
    }
    drive() {
    	// 운전을 구현하는 코드
    }
}

// *ES5의 메서드
class Car {
	constructor(brand, name, color) {
    	// 생략
    }
    Car.prototype.refuel = function() {
    	// 연료 공급을 구현하는 코드
    }
    Car.prototype.drive = function() {
    	// 운전을 구현하는 코드
    }
}

• this?
  • this는 인스턴스 객체를 의미한다. parameter로 넘어온 브랜드, 이름, 색상 등은 인스턴스 생성 시 지정하는 값이며,
    위와 같이 this에 할당한다는 것은 만들어진 인스턴스에 해당 브랜드, 이름, 색상을 부여하겠다는 의미이다

 

instance 사용

let sonata = new Car('hyundai', 'sonata', 'black')
let k5 = new Car('kia', 'k5', 'white')

// 속성
sonata.name; // "sonata"
k5.color; // "white"
// 메서드
sonata.refuel() // "sonata에 연료를 공급합니다"
k5.drive() // "k5가 운전을 시작합니다"

* 흔히 아는 new Array() 메서드도 같은 원리다.

let arr = new Array ("hello", "bye", "good")
arr.length // 3
arr.push("happy") // arr 배열의 마지막 요소 자리에 "happy"를 추가한다

 

* 우리가 가장 많이보는 사이트인 MDN에 배열에 관한 검색을 해보면

Array.prototype.___()으로 나오는 걸 볼 수있다.

위 이미지에 나오는 메서드들 모두 Array의 class의 원형객체로 정의되었기 때문이다.(ES5 참고)

 

 

 

 

MDN에 배열에 관한 메서드 검색할 때 

Array.prototype.____()을 종종 봤고, 정보 검색에 급급해 모른체 넘어갔었는데!

이제 알게되었다....!!!