Javascript Class
Class란?
object{} 자료형은 간단한 텍스트나 숫자를 담을 수도 있고, 함수를 담아 사용할 수도 있다.
코딩을 하다보면 동일한 속성과 자료를 가진 object를 여러 개 만들어야 할 일이 생기게 되는데, 이럴 때 쓸 수 있는 문법이 바로 Class 문법이다.
- Class 문법을 이용해 새로운 object 생성자 역할을 하는 친구를 만들어놓고,
- new 키워드를 이용해 생성자가 가지고 있던 속성과 자료를 쏙 빼닮은 object를 아주 쉽게 무한정 뽑아낼 수 있다.
생성자
object를 뽑아내는 생성자라는 것을 만들어보자. 예전 자바스크립트 문법은 따로 생성자를 만드는 문법이 없었고 function과 this라는 키워드를 빌려 생성자를 만들어내야 했다.
function pastClass(myName) {
this.myName = myName;
this.pastClass = 'pastClass';
}
let newObject = new pastClass('Lee jihoon');
console.log(newObject.myName)이런식으로 pastClass라는 생성자를 만들어 new pastClass()처럼 new 키워드를 이용해 새로운 오브젝트를 손쉽게 뽑아낼 수 있다.
새로 뽑은 newObject는 function 키워드 안에 들어 있던 myName, pastClass 등 여러가지 속성들을 사용할 수 있다.
상속
생성자(부모)로부터 속성들을 물려받아 새로운 object(자손)를 만들어내는 이런 과정을 프로그래밍에선 상속이라고 표현한다.
자바스크립트에서는 특이한 방식으로 상속 기능을 구현하고 있는데, prototype이라는 것을 이용한다. function이라는 키워드를 이용하는 순간 prototype이라는 속성이 pastClass라는 생성자(부모)에 추가된다. prototype은 부모가 물려줄 속성들을 전부 담고 있는 일종의 유전자라고 보면 된다.
ES6 클래스 문법
class pastClass {
constructor(myName) {
this.myName = myName;
this.pastClass = 'pastClass';
}
getInfo() {
return this.pastClass + ' ' + this.myName + ' ' + 'made by Lee';
}
}
const newClass = new pastClass('Lee jihoon');
console.log(newClass.getInfo()); // 'passClass Lee jihoon made by Lee'생성자
생성자란 클래스가 생겨날 때 첫번째로 실행되는 메소드이다.
클래스 내에 생성자를 넣어도 되고 넣지 않아도 된다.
자바스크립트의 클래스는 생성자를 선언하지 않으면 자동으로 빈 생성자가 호출되는 형식으로 만들어져 있다.
모든 클래스가 new를 통해서 인스턴스가 생성되었을 시점에는 무조건 생성자가 호출된다.
클래스 내부에서 선언 불가능
class pastClass {
myName = '';
pastClass = '';
constructor(myName) {
this.myName = myName;
this.pastClass = 'pastClass';
}
getInfo() {
return this.pastClass + ' ' + this.myName + ' ' + 'made by Lee';
}
}
const newClass = new pastClass('Lee jihoon');
console.log(newClass.getInfo()); // 'passClass Lee jihoon made by Lee'이 코드는 node.js 환경에서 실행 시 오류가 발생한다.
기본적인 node.js 환경에서는 클래스 내부에 값을 선언하는 문법은 사용이 불가능하다.
extends를 이용한 클래스 확장
클래스를 상속해서 클래스를 또 만들 수 있다는 개념인데, 하나의 클래스를 만들고 이걸 상속해서 다른 클래스를 만들 수 있다.
class pastClass {
constructor(myName) {
this.myName = myName;
this.pastClass = 'pastClass';
}
getInfo() {
return this.pastClass + ' ' + this.myName + ' ' + 'made by Lee';
}
}
class extendsClass extends pastClass {
// 부모 생성자가 전해줄 myName
constructor(myName) {
// super를 이용해서 부모 생성자 호출, 생성자에게 필요한 myName도 넘겨준다.
// super는 부모 생성자를 호출할 수 있는 메소드이다.
// 자식 클래스에서 super를 호출하지 않을 경우 오류가 발생한다.
// 하지만 자식 클래스에서 생성자 자체를 선언하지 않았다면 오류는 발생하지 않는다.
super(myName);
}
// 부모 클래스의 메소드를 재선언하면 자동으로 덮어씌워진다.
getInfo() {
console.log(this.pastClass);
return 'This is extends Class!';
}
}
const testValue = new extendsClass();
console.log(testValue.getInfo()); // 'This is extends Class!'- 두 개의 클래스가 정의됨
- testValue라는 곳에 extendsClass 인스턴스가 생성
- testValue의 getInfo 메소드의 리턴값을 출력
super
자바스크립트에서 클래스를 확장받았을 때 자식 클랫의 생성자에서는 반드시 부모 생성자를 호출시켜야 한다. 그렇지 않으면 오류가 발생한다.
그 역할을 super가 하는 것이고 super 키워드에 myName값을 넘기는데, 클래스를 선언할 때 생성자에 넘기는 값과 동일하게 부모 생성자의 인자로 들어가게 된다.
자식 클래스에서의 getInfo()는 약간 다른 기능을 하게 하고 싶을 때 자식 클래스에서 부모 클래스에 정의되어 있는 메소드를 덮어씌울 수 있다.
자식 클래스와 부모 클래스가 동일하게 getInfo()라는 메소드를 가지고 있지만, 실제 실행을 시켜보면 자식 클래스에 정의되어 있는 클래스가 먼저 호출된다. 이건 선언 시점의 문제이고, 당연히 나중에 선언된 클래스인 자식 클래스의 메소드가 마지막으로 기존에 생성되어 있던 부모 클래스의 메소드를 덮어씌우는 현상이 발생한 것이다.
< 출처 : https://ljh86029926.gitbook.io/coding-apple-react/undefined/class >
