JavaScript

Class

ES5 이전에서 자바스크립트는, 상속을 위해 프로토타입의 생성자만을 사용했지만, Class라는 문법이 추가되어 생성자의 기능을 대체할수 있게 되었다.

Class와 Prototype

Prototype

funtion Person(name) {
  this.name = name;
}
Person.prototype.hello = funtion() {
  console.log("Hello!");
};

let person1 = new Person("Geun");
person1.hello(); // Hello! 출력

Class

class Person{
  constructor(name) {
    this.name = name;
	}
  hello() {
    console.log("Hello!");
  }
}

let person1 = new Person("Geun");
person1.hello(); // Hello!출력

다음과 같이 prototype방식과 class방식을 사용해볼 수 있다.

Class의 구성요소

클래스 내에서 정의된 함수를 method, 클래스로 생성된 객체를 instance라고 한다.
클래스 또한 함수처럼 호출이 되기 전까지는 코드가 실행되지 않고 정의만 되어있다.
new 키워드를 이용하면 호출할수 있다.
constructor 키워드를 통해, class에서 필요한 기초 정보들을 세팅하여 사용할 수 있다. 여기서 this는 자기 자신객체를 뜻한다.

Class의 상속

Class는 extends를 이용하여 상속을 구현할 수 있다.

class Person{
  constructor(name) {
    this.name = name;
	}
  hello() {
    console.log("Hello!");
  }
}

class Man extends Person {
  greeting() {
    console.log("Nice to meet you!");
  }
}

let man1 = new Man("Geun");
man1.hello();//Hello! 출력

이처럼 extends를 이용하여 Person을 상속한 Man으로 객체 man1을 생성하면 상속한 객체인 Person의 hello() 메소드를 사용할 수 있다.

Super

부모 클래스를 상속하고, 추가적으로 자신만의 값을 사용하고 싶다면, super 키워드를 사용할 수 있다.

class Person{
  constructor(name) {
    this.name = name;
	}
  hello() {
    console.log("Hello!");
  }
}

class Man extends Person {
  constructor(name, age) {
        console.log('In Man Constructor')
        super(name)
        this.age = age;
    }
     greeting() {
    console.log("Nice to meet you!");
  	}
}

let man1 = new Man("Geun",24);
console.log(man1); // Man {name: 'Geun', age: 24} 출력

man1은 Person을 상속한 Man으로 만든 객체로, super을 이용해서 name은 재사용하고, age값을 추가로 설정하였다.