이전에 배웠던 css의 class와는 전혀 관계없는 js 만의 Class이다.
Class 란 무엇인가?
사전적 의미
클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.
객체을 생성해야 하는데 만약 그 갯수가 수억개라면 수많은 시간이 걸릴 것이다.
Class는 객체를 생성하기 위한 템플릿이다. class를 사용함으로써 동일한 종류의 객체를 공장에서
물건을 생산하듯이 만들어 낼 수 있다.
Class 사용법
클래스는 다음과 같은 기본 문법을 사용해 만들 수 있다.
class 선언
class를 선언하기 위해서는 클래스의 이름과 함께 class 키워드를 사용한다.
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}function 선언과 class 선언의 차이점
함수 선언의 경우 호이스팅이 일어나지만, 클래스 선언은 아니다.
클래스를 사용하기 위해서는 클래스 선언을 먼저 해줘야한다.
const p = new Rectangle(); // ReferenceError
class Rectangle {}생성자(Constructor)
constructor 메소드는 class 내에서 객체를 생성하고 초기화 하기위한 메소드이다.
class 안에는 constructor라는 이름을 가진 특별한 메서드를 하나씩만 가질 수 있다.
두 개 이상의 constructor 메서드는 SyntaxError를 유발한다.
class는 새로운 인스턴스를 생성할 때마다 counstructor() 메소드를 호출한다.
constructor 는 객체를 만들어주는 생성자 메소드 이다.
new를 통해 호출하면 자동으로 실행되며, 인수를 넘겨 받을 수 있다.
class Car {
constructor(name, price) {
this.name = name;
this.price = price;
}
}
const morning = new Car('Morning', 2000000);위 코드에서 this 는 해당 인스턴스, 즉 class 함수로 생겨난 객체를 의미한다.
생성자 함수로 객체를 만들 때 필요한 데이터 전달 한다.
멤버 변수
위의 constructor()는 name 과 price 두개의 인자를받는데
name, price와 같이 변경 가능한 상태값이자 clas내의 컨텍스트에서 어느 곳에서나
사용할 수 있는 변수를 멤버 변수라고 부른다.
멤버 변수는 this 키워드로 접근한다.
메소드 Methods
객체가 프로퍼티 값을 함수로 갖고 있는것을 메소드라고 부른다.
Class의 method는 기본적으로 객체의 문법과 비슷하지만
다른점은 객체는 프로퍼티마다 ,comma로 구분지어 주어야 했다면
class에서는 사용하지 않고 구분한다.
class Car {
constructor(name, price) {
this.name = name;
this.price = price;
this.department = "선릉지점";
}
applyDiscount(discount) {
return this.price * discount;
}
changeDepartment(departmentName) {
this.department = departmentName;
}
}class의 상속(메소드 추가 방법)
클래스 내부에 메소드를 추가가 가능하지만 단점이 있다.
-
추가하는 함수를 모든객체에 적용시키고 싶지 않은데 직접추가하면 중복이 많아져 유지보수에 좋지않고 메모리 효율이 떨어진다.
-
이미 만들어 놓은 다른 클래스를 유지보수에 직접 수정시 오류가 날 수 있다.
해답은 class 상속을 통해 자식 생성자를 만들어 그 값을 부모로 부터 상속받아 사용하면 된다.
상속 받는 자식 클래스의 사용법
class 자식클래스 extends 부모클래스 {
사용할 함수 (){
}
}
class person{
constructor(name, first, second){
this.name= name;
this.first = first;
this.second = second;
}
sum(){
return this.first + this.second ;
}
class personPlus extends Person{
avg(){
return (this.first + this.second) / 2;
}
}
}
인스턴스
class를 통해 생성된 객체를 인스턴스라고 부른다.
class로 객체를 생성하는 과정을 인스턴스화라고 부른다.
인스턴스는 class의 porperty 이름과 method를 갖는 객체이다.
인스턴스 마다 모두 다른 프로퍼티 값을 갖고 있다.
const morning = new Car('Morning', 2000000);class 이름에 new를 붙여서 생서하며 ()괄호안에는 constructor에서 필요한 정보를 인자로 넘겨준다.
만약 새로운 인스턴스를 생성하고 싶다면
const spaceship = new Car('우주선', 25000000);이렇게 new를 사용하고 새로운 인자를 작성하면 된다.
class를 통하여 비슷한 형태의 객체를 만드는것을 예를 들면 붕어빵 틀에 팥이나 크림만 선택하여
한번에 많은 붕어빵을 만드는 것처럼 class도 틀만 만들고 안에 들어갈 값들만 변경하여 쉽게 객체를 생산할 수 있다.
