class는 함수다. 함수를 함수표현식과 함수 선언으로 정의할 수 있듯이, class도 class 표현식과 class 선언 두가지로 정의할 수 있으며 또한 class는 몸체에 0개 이상의 메서드만 정의할 수 있다. class 몸체에서 정의 할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드 세가지가 있다.
생성자는 인스턴스를 생성하고 초기화하기 위한 특수한 메서드다. 생성자는 이름을 변경할 수 없다.
class Car {
constructor(name, price) {
this.name = name;
this.price = price;
}
}
name
, price
2개의 argument(인자)를 받는다.this
키워드class의 실행범위(context)에서 해당 instance
를 의미한다.name
, price
프로퍼티에 값을 할당한다.name
, price
와 같이 변경 가능한 상태값이자 class내의 실행범위 내에서 어느 곳에서나 사용할 수 있는 변수를 '멤버 변수'라고 부른다.this
키워드로 접근합니다.인스턴스는 class를 통해 생성된 객체이며, class의 property이름과 메서드를 갖는 객체이다. class로 객체를 생성하는 과정을 '인스턴스화'라고 부릅니다.
//인스턴스 생성
const morning = new Car('Morning', 20000000);
console.log(morning);
/*생성된 인스턴스
Car {
name: 'Morning',
price: 20000000,
__proto__: Car { constructor: ƒ Car() }
} */
객체의 프로퍼티 값을 함수로 갖고 있는 것을 메서드라고 부른다.
//메서드 생성하여 인스턴스 정보 변경하기
class Car {
constructor(name, price) {
this.name = name;
this.price = price;
this.department = "선릉지점";
}
changeDepartment(departmentName) {
this.department = departmentName;
}
}
const morning = new Car("morning", 2000);
const newDepartment = morning.changeDepartment("강남지점")
console.log(morning)
/* derpartment의 정보가 "선릉지점" 에서 "강남지점"으로 변경되었다!
Car {
name: 'morning',
price: 2000,
department: '강남지점',
__proto__: Car { constructor: ƒ Car(), changeDepartment: ƒ changeDepartment() }
}
*/
- MyMath라는 class를 생성해주세요.
- constructor에서는 숫자 2개를 인자로 받아 프로퍼티로 저장합니다.
- 총 4개의 메서드를 구현해주세요.
1) getNumber: 두 개의 숫자가 무엇인지 배열로 반환하는 메서드 ex) [1, 2]
2) add: 두 개의 숫자를 더하는 메서드
3) substract: 두 개의 숫자를 빼는 메서드
4) multiply: 두 개의 숫자를 곱하는 메서드
class MyMath {
constructor(num1,num2){
this.num1 = num1;
this.num2 = num2;
}
getNumber(num1,num2){
return [this.num1, this.num2];
}
add(num1,num2){
return this.num1+this.num2;
}
substract(num1,num2){
return this.num1-this.num2;
}
multiply(num1,num2){
return this.num1*this.num2;
}
}
let myNumber = new MyMath(2,5);
console.log(myNumber.multiply());
새로 생성한 메서드에 this.num1
, this.num2
가 아니라 num1, num2라고 적어주었던 것.
사실, this.num1대신 왜 num1로 적으면 안되지는 아직 클리어하게 이해하지 못했다. class구조에 대해서 좀 더 명확하게 정리할 필요가 있다!!