ES6의 클래스 및 클래스 상속
2024년 07월 04일 by이가은
저희가 프로토타입을 활용하여 직접 구현해봤던 클래스는
ES6의 class
를 통해 간편히 사용할 수 있습니다!
ES5와 ES6의 클래스 문법 비교
var ES5 = function (name) {
this.name = name;
};
ES5.staticMethod = function () {
return this.name + ' staticMethod';
};
ES5.prototype.method = function () {
return this.name + ' method';
};
var es5Instance = new ES5('es5');
console.log(ES5.staticMethod()); // es5 staticMethod
console.log(es5Instance.method()); // es5 method
var ES6 = class {
constructor(name) {
// 생성자 함수
this.name = name;
}
static staticMethod() {
// 생성자 함수(클래스) 자신만이 호출 가능
return this.name + ' staticMethod';
}
method() {
// 자동으로 prototype 객체 내부에 할당되는 메서드로, 인스턴스가 프로토타입 체이닝을 통해 마치 자신의 것처럼 호출 가능
return (this.name = ' method');
}
};
var es6Instance = new ES6('es6');
console.log(ES6.staticMethod()); // es6 staticMethod
console.log(es6Instance.method()); // es6 method
ES6의 클래스 상속
var Rectangle = class {
constructor (width, hegith) {
this.width = width;
this.height= height;
}
getArea () {
return this.width * this.height;
}
}
var Square class extends Rectangle {
constructor (width) {
super(width, width);
}
getArea() {
console.log('size is:', super.getArea());
}
}