이전 post와 글이 이어집니다.....!!!!!!!!
javascript의 class ES6 상속방법에 대해서 살펴보겠습니다.
자바스크립트에서 상속은 한 객체의 메소드 / 속성을 다른 객체를 통해 사용할 수 있다는 개념을 설명합니다.
class선언방법은 함수와 동일하게 클래스선언(Class declarations) 과 클래스표현으로 클래스를 만들수 있습니다.
클래스 선언(Class declarations)
class Person {
// 코드를 입력하세요
}클래스 표현(Class expressions)
let person = class Person {
// 코드를 입력하세요
}코드를 작성해보겠습니다.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
introduce() {
console.log(`안녕하세요 ${this.name} 입니다`);
}
}
class Student extends Person{
constructor(...args) {
super(args[0],args[1]);
this.grade = args[2];
}
checkGrade() {
return `name: ${this.name} age: ${this.age} grade: ${this.grade}`;
}
}
let human = new Person('curry', 30);
let james = new Student('james', 19, 'A');
console.log(human); //Person { name: 'curry', age: 30 }
console.log(james); // Student { name: 'james', age: 19, grade: 'A' }
console.log(james.introduce()); // 안녕하세요 james 입니다
console.log(james.checkGrade()); // name: james age: 19 grade: A
console.log(human.checkGrade()); //Error 발생
console.log(james.constructor === Person); // false
console.log(jame.constructor === Student); // true constructor는 변함이 없음구글링을 하다가 좋은글이 있어 가져왔습니다.링크
Note that the class version is just the syntactic sugar for the prototypal inheritance. In other words, JavaScript uses classes for the syntax but still realizes on the prototype mechanism
간단히 번역을 해보자면 JavaScript는 class문법을 사용하지만 prototype의 메커니즘을 여전히 인지합니다.
위의코드에서 Student class는 자식(child)클래스 또는 sub class 또는 파생클래스(derived class)라고 하며, Person class는 부모(parent) 클래스 또는 super class라고 불립니다.
자바스크립트는 자식클래스에 constructor가 있는경우 super()를 사용하여 부모클래스 속성을 상속을 받아야합니다.
자식클래스에 constructor이 없는경우:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
introduce() {
console.log(`안녕하세요 ${this.name} 입니다`);
}
}
class Student extends Person {
sayHello() {
console.log('hello');
}
}
let james = new Student();
james.sayHello(); // Error없이 'hello'가 출력이번에는 자식클래스에 constructor이 있는경우:
class Student extends Person {
constructor() {
}
sayHello() {
console.log('hello');
}
let james = new Student(); // Must call super constructor in derived class before accessing 'this' or returning from derived constructor at new Studentconstructor을 생성 후 안에 super()넣지 않으니 Error가 발생한걸 볼 수 있습니다.
super ()가 this 객체를 초기화하므로이 객체에 접근하기 전에 super ()를 호출해야합니다. super ()를 호출하기 전에 this에 액세스하려고하면 오류가 발생합니다.
그리고 프로토타입에서 Person.call(this) 와 class문법에서 super()은 똑같은 기능을 한다는것을 알 수 있습니다.
추가적으로 객체지향언어프로그래밍 특징 중 하나인 다향성(polymophis)은
상속을 통해 기능을 확장하거나 변경하는것을 가능하게 해주고, 같같은 클래스내에 코드의 길이를 줄여주는 개념입니다. 관용적인 개념은 같은 모양의 코드가 다른 행위를 하는 것을 나타냅니다(원본함수랑 이름은 같게하나 기능을 추가시키는개념)
예를 들어 Student class에서 Person클래스에 있는 introduce에 메소드에다가 추가적인 기능을 더 부여하는 방법에 대해서 구현해보겠습니다.
예를들어 james.introduce() 를 실행 시 기존에는 안녕하세요 james 입니다 라는게 나왔다면 기능을 추가한후 james.introduce() 실행시에는 안녕하세요 james 입니다 성적은 ~입니다라고 추가기능을 부여하는 코드입니다.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
introduce() {
console.log(`안녕하세요 ${this.name} 입니다.`);
}
}
class Student extends Person{
constructor(...args) {
super(args[0],args[1]);
this.grade = args[2];
}
checkGrade() {
return `name: ${this.name} age: ${this.age} grade: ${this.grade}`;
}
introduce() {
super.introduce();
console.log(`성적은 ${this.grade} 입니다.`)
}
}
let james = new Student('james', 19, 'A');
console.log(james.introduce()); 안녕하세요 james 입니다. 성적은 'A'입니다.자식클래스에 introduce() 메소드를 추가하였습니다.
introduce() {
super.introduce();
console.log(`성적은 ${this.grade} 입니다.`)
}super.introduce()를 이용하여 부모클래스 메소드를 상속 받은 후 추가적인 기능을 부여를 하였습니다.
간단요약
class 사용법
자식클래스에 constructor을 선언하면 super()를 통해서 this를 초기화 해줘야지만 메소드 및 this 사용 할 수 있다.
class 자식클래스명 extends 부모클래스 {
constructor() {
super();
}
}super는 함수 및 객체의 특성을 두가지가 있음
super. // super()
class에는 static이라는 메소드가 있는데 다음번에 시간날때 업데이트하기
간단하게 적으면 인스턴스를 생성하지 않고 메소드를 바로 실행 할 수 있음(인스턴스를 생성 후 static메소드를 호출할 수 없음);
TODO: balanced BST!!!!
