하나의 모델이 되는 청사진을 만들고 → class 붕어빵 틀
그 청사진을 바탕으로 한 객체를 만드는 → instance 붕어빵
class FishBread(flavor) { // class
}
let fishBread1 = new FishBread('red bean'); // instance
let fishBread2 = new FishBread('custard')
JavaScript
복사
ES5에서는 클래스는 함수로 정의했지만
ES6에서 class 키워드를 통해 정의하는 문법이 도입되었다
// ES5
function FishBread(color, flavor) {
this.color = color;
this.flavor = flavor;
}
FishBread.prototype.eat = function() {
}
// ES6
class FishBread {
constructor(color, flavor) { // 생성자 함수
this.color = color;
this.flavor = flavor;
}
eat() {
}
}
JavaScript
복사
new 키워드를 통해 클래스의 인스턴스를 만들어낼 수 있음
new 키워드를 사용하는 즉시 생성자 함수가 실행되고 변수에 인스턴스가 할당
각각의 인스턴스는 클래스의 고유한 속성과 메소드를 갖게된다
let fishBread1 = new FishBread('red bean'); // instance
let fishBread2 = new FishBread('custard')
JavaScript
복사
constructor
인스턴스가 초기화될 때 실행하는 생성자 함수
속성
객체가 가진 변수
메소드
객체가 가진 함수
this
함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context
해당 인스턴스 객체를 나타냄
prototype
모델의 청사진을 만들 때 쓰는 원형 객체
super
부모 오브젝트 속성 호출
생성자에서 this를 사용해 부모 오브젝트의 속성과 메소드를 사용할 수 있음
상속
class Grub {
// TODO..
constructor() {
this.age = 0;
this.color = 'pink';
this.food = 'jelly';
}
eat() {
return 'Mmmmmmmmm jelly';
}
}
module.exports = Grub;
JavaScript
복사
const Grub = require('./Grub');
class Bee extends Grub {
// TODO..
constructor() {
super(); // 부모 속성 가져오기
this.age = 5;
this.color = 'yellow';
this.job = 'Keep on growing';
}
}
module.exports = Bee;
JavaScript
복사