자바스크립트 프로젝트 북을 보며 공부한 내용입니다.
https://book.naver.com/bookdb/book_detail.nhn?bid=12285042
ECMAScript 6 Class
기존의 자바스크립트에 없던 클래스가 ES6에서부턴 선언할 수 있어 코드가 더욱 간결해진다.
// 생성자 함수(ES5)
function Character(name, job){
this.name = name;
this.job = job;
}
// 프로토타입으로 메서드 생성
Character.prototype.move = function(){
document.write(this.name + ' ' + this.job + ' 캐릭터 이동<br>');
}
// 인스턴스 객체 생성
var char1 = new Character('루이스', '기사');
// 메서드 실행
char1.move();
위의 코드를 ES6의 클래스로 하면 아래와 같다.
// 클래스 선언(ES6)
class Character{
constructor(name, job){
this.name = name;
this.job = job
}
move(){
document.write(this.name + ' ' + this.job + ' 캐릭터 이동<br>');
}
}
// 인스턴스 객체 생성
let char1 = new Character('루이스', '기사');
// 메서드 실행
char1.move();
클래스의 상속
클래스의 상속이란 클래스 원형을 토대로 새로운 클래스를 재창조하는 것입니다.
"use strict"; // 문법을 엄격하게 적용함을 선언하는 키워드
// 클래스 선언(ES6)
class Character{
constructor(name, job){
this.name = name;
this.job = job
}
move(){
document.write(this.name + ' ' + this.job + ' 캐릭터 이동<br>');
}
}
// 자식 클래스 추가
class Monster extends Character{
constructor(name, job, skill){
super(name, job);
this.skill = skill; // 새로운 속성 부여
}
useSkill(){ // 새로운 메서드 추가
document.write(this.name + ' ' + this.job + ' ' + this.skill + ' 스킬 사용<br>');
}
}
// 인스턴스 객체 생성
let char1 = new Character('루이스', '기사');
let monster = new Monster('오크', '대장', '몽둥이');
// 메서드 실행
char1.move();
monster.useSkill();
monster.move();
Character의 자식클래스(extends 로 상위 클래스 지정)를 추가합니다.
생성자 메소드에서 super 키워드를 통해 상위 클래스의 생성자 메소드를 호출 할 수 있습니다.
생성자 메소드에서 this를 사용하기 위해서 super 메소드를 먼저 호출해야 합니다.
반응형
'javascript' 카테고리의 다른 글
로컬스토리지 예제 (0) | 2019.10.21 |
---|---|
퀴즈 만들기 (0) | 2019.10.18 |
3d page 만들기 (0) | 2019.10.08 |
스크롤했을때 나타나는 이미지 (0) | 2019.09.26 |
스코프(Scope) (0) | 2019.09.26 |