Class
- 자바에서는 객체를 정의하는 틀 또는 설계도와 같은 의미로 사용된다.
- 이러한 설계도를 가지고, 여러 객체를 생성하여 사용한다.
- 자바스크립트의 ES6 클래스 문법은 좀 더 JAVA스럽게 객체 지향적으로 표현하기 위해 추가된 새로운 문법이다.
ES5 프로토타입 문법
// 생성자
function Person({name, age}) {
this.name = name;
this.age = age;
}
Person.prototype.introduce = function() {
return `안녕하세요, 제 이름은 ${this.name}입니다.`;
};
const person = new Person({name: '최수영', age: 27});
console.log(person.introduce()); // 안녕하세요, 제 이름은 최수영입니다.ES6 클래스 문법
// 클래스
class Person {
// 이전에서 사용하던 생성자 함수는 클래스 안에 `constructor`라는 이름으로 정의합니다.
constructor({name, age}) { //생성자
this.name = name;
this.age = age;
}
// 객체에서 메소드를 정의할 때 사용하던 문법을 그대로 사용하면, 메소드가 자동으로 `Person.prototype`에 저장됩니다.
introduce() {
return `안녕하세요, 제 이름은 ${this.name}입니다.`;
}
}
const person = new Person({name: '최수영', age: 27});
console.log(person.introduce()); // 안녕하세요, 제 이름은 최수영입니다.자바스크립트의 클래스 문법
-
constructor
: 인스턴스를 생성하고 클래스 필드를 초기화 히기 위한 메서드
: 클래스 안에 1개만 존재할 수 있다.
: 초기화와 필드의 선언은 반드시 constructor 내부에서 실시한다.
: constructor 내부에 선언한 클래스 필드는 클래스가 생성할 인스턴스에 바인딩 된다.
: 클래스 필드는 그 인스턴스의 프로퍼티가 되며, 인스턴스를 통해 클래스 외부에서 언제나 참조할 수 있다. (public) -
클래스 메소드를 정의할 때는 객체 리터럴에서 사용하던 문법과 유사한 문법을 사용한다.
class Calculator {
add(x, y) {
return x + y;
}
subtract(x, y) {
return x - y;
}
}
let calc = new Calculator();
calc.add(1,10); // 11클래스 상속
- 한 클래스의 기능을 다른 클래스에서 재사용 할 수 있다.
extends
- extends 통해 Child 클래스가 Parent 클래스를 상속했다.
class Parent {
static staticProp = 'staticProp';
static staticMethod() {
return 'I\'m a static method.';
}
instanceProp = 'instanceProp';
instanceMethod() {
return 'I\'m a instance method.';
}
}
class Child extends Parent {}
// 상속하면 부모의 static요소들을 사용 가능
console.log(Child.staticProp); // staticProp
console.log(Child.staticMethod()); // I'm a static method.
// 상속하면 부모의 인스턴스를 사용 가능
const c = new Child();
console.log(c.instanceProp); // instanceProp
console.log(c.instanceMethod()); // I'm a instance method.super
super(); // 부모 생성자
super.메소드명 // 접근- 생성자 내부에서 super를 함수처럼 호출하면, 부모클래스의 생성자가 호출된다.
- 정적 메소드 내부에서는 super.prop과 같이 써서 부모 클래스의 prop 정적 속성에 접근할 수 있다.
- 인스턴스 메소드 내부에서는 super.prop과 같이 써서 부모 클래스의 prop 인스턴스 속성에 접근할 수 있다.
class Person{
constructor(name, first, second){
this.name=name;
this.first=first;
this.second=second;
}
sum(){
return (this.first + this.second);
}
}
class Person2 extends Person{
// override Person
constructor(name, first, second, third){
super(name, first, second); //부모 생성자를 가져와서 행하게 한다.
this.third = third;
}
sum(){
// 부모 메소드를 가져와서 사용.
// 오버로딩 메소드에서 온전한 부모 메소드를 사용하고 싶을때
return super.sum() + this.third;
}
}
var kim = new Person2('kim', 10, 20, 30);
document.write(kim.sum()); // 60아직은 완벽히 이해가 가지 않지만, 좋은 블로그 글이라 이해하고 넘어간 부분만 기록해두었다.
