JavaScript 공부정리 - 클래스
1. 클래스란?
쉽게말해 붕어빵 틀이다.
그리고 그 붕어빵 틀로 만들어 낸 붕어빵이 바로 인스턴스이다.
이렇게 말하면 오히려 더 헷갈릴수도 있으니
프로그래머답게 설명하자면
특정 기능을 하는 구문을 만들어 놓은 것이 클래스이고
그걸로 만들어 낸 새로운 것들이 인스턴스이다.
아래 예시를 보자
class User {
}
const Tarel = new User();
Tarel.name = "Tarel";
Tarel.age = 'adult';
Tarel.tech = "Node.js";
console.log(Tarel.name); // Tarel
console.log(Tarel.age); // adult
console.log(Tarel.tech); // Node.jsclass 라는 선언자를 통해 User를 만들었다
그리고 Tarel 이라는 객체를 새로 생성했는데
여기에 이름과 나이, 기술을 각각 넣었다.
2. this와 프로퍼티
전에 배웠던 this를 여기선 어떻게 쓸까?
class User {
constructor(name, age, tech) { // User 클래스의 생성자
this.name = name;
this.age = age;
this.tech = tech;
}
}
const user = new User("Tarel", "adult", "Node.js"); // user 인스턴스 생성
console.log(user.name); // Tarel
console.log(user.age); // adult
console.log(user.tech); // Node.jsconstructor는 클래스의 생성자다.
이걸 통해 class는 파라미터를 받을 수 있게 된다.
JS에서 사용하는 모든 값은 프로퍼티 값이고 이 프로퍼티가 함수면 메소드라고 배운바 있다.
즉, 함수가 객체에 들어가 있으면 메소드가 되는 것인데, 클레스에서도 이렇게 메서드를 만들 수 있다.
class User {
constructor(name, age, tech) { // User 클래스의 생성자
this.name = name;
this.age = age;
this.tech = tech;
}
getName() { return this.name; } // getName 메서드
getAge() { return this.age; } // getAge 메서드
getTech() { return this.tech; } // getTech 메서드
}
const user = new User("Tarel", "adult", "Node.js"); // user 인스턴스 생성
console.log(user.getName()); // Tarel
console.log(user.getAge()); // adult
console.log(user.getTech()); // Node.js
하나하나 살펴보자.
User라는 클래스에는 파라미터 역할을 해줄 constructor 가 선언이 되어 있고
이름과 나이, 기술을 받는다.
그리고 그 아래 3개의 함수가 있으니 이는 각각 입력받은 것을 출력하는 것이다.
user라는 변수는 클레스 User를 받아와 constructor에 Tarel, adult, Node.js를 순서대로 넣었고
user라는 변수에 있는 함수 3개를 각각 출력한 것이다.
3. 상속이란?
클래스는 상속이 가능하다.
이로인해 부모클래스와 자식클래스로 나뉠 수 있는데
부모는 자식에게 자신의 메서드, 변수 등과 같은 것을 자식 클래스에게 줄 수 있다.
코드가 길어질 것 같으니 최대한 짧게 짧게 해보자
class User { // User 부모 클래스
constructor(name, age) { // 부모 클래스 생성자
this.name = name;
this.age = age;
}
getTech(){ return this.age; } // 부모 클래스 getTech 메서드
add(a,b){return a+b}
}
class Employee extends User{ // User로부터 물려받은 첫번째 자식
constructor(name, age) { // 자식 클래스 생성자
super(name, age);
}
}
class Alice extends User{ // User로부터 물려받은 두번째 자식
constructor(name) { // 자식 클래스 생성자
super(name);
}
power = "Fire!!"
a = super.add(1,2)
}
const employee = new Employee("Tarel", "adult", "Node.js");
const girl_1 = new Alice("Alice", "young", "TripleMath");
console.log(employee.name); //Tarel
console.log(employee.age); //adult
console.log(employee.getTech()); //adult
console.log(girl_1.age); //undefined //없는걸 요구하면 이렇게 된다.
console.log(girl_1.power); //Fire!!
console.log(girl_1.a); // 3시작하기 전에 여기서 super란 무엇일까
자세히보면 super는 자식이 쓰고 있는것을 볼 수 있는데 super란 부모를 부르는 것과 같다.
두번째 자식인 Alice 클래스를 보면 한번은 super(name)이라고 적혀있고
그 아래에는 a = super.add(1,2)가 있다.
두 가지 경우중 첫번째는 부모클래스의 생성자(constructor)를 호출한 것이고
두번째는 부모클래스가 가지고 있는 함수중 하나를 참조한 것이다.
첫번째 자식을 보자
constructor를 통해 name과 age를 순서대로 파라미터로 받는다(이때, 선언문을 보면 3개의 값이 들어갔는데 이중 마지막 값은 버려진다.)
그렇게 받은 두 값은 부모를 참조하여 각각 name과 age에 넣는다.
getTech 메서드는 호출되면 나이를 리턴하고
add 메서드는 a와 b를 받으면 그걸 더한 값을 반환한다.
이런식으로, 클래스는 자주쓰는 명령들의 집합이고
constructor는 클래스가 파라미터를 받아야할 때 쓰는 것이며
그 외에도 여러가지 변수나 함수등을 넣어 하나의 세트로 만들고
그 세트메뉴를 여러 클래스가 공유하면서 저마다 다른 기능을 가지게 할 수 있는 것이다.
비유를 하자면 모든 직원에게 똑같이 똑같은 책상을 지급했고 그 위에는 같은 컴퓨터를 배치했지만
직원마다 책상 위에 있는 물품들은 종류에서 차이가 있을 수 있다.
이때 직원에게 공통으로 지급된 것이 부모클래스, 저마다 개성있는 물품을 배치한 것은 자식클래스라고 할 수 있다.