Skip to content
On this page

클래스(Class)

Class를 사용한 상속 방법

js
// Shape - 상위클래스
class Shape {
	constructor() {
		this.x = 0;
		this.y = 0;
	}

	// 상위클래스 메서드
	move(x, y) {
		this.x += x;
		this.y += y;
		console.info('Shape moved.');
	}
}

// Rectangle - 하위클래스
// 하위클래스는 상위클래스를 확장
class Rectangle extends Shape {
	constructor() {
		// super 생성자 호출.
		super();
	}
}

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle?', rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?', rect instanceof Shape); // true
rect.move(1, 1); // Shape moved.
// Shape - 상위클래스
class Shape {
	constructor() {
		this.x = 0;
		this.y = 0;
	}

	// 상위클래스 메서드
	move(x, y) {
		this.x += x;
		this.y += y;
		console.info('Shape moved.');
	}
}

// Rectangle - 하위클래스
// 하위클래스는 상위클래스를 확장
class Rectangle extends Shape {
	constructor() {
		// super 생성자 호출.
		super();
	}
}

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle?', rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?', rect instanceof Shape); // true
rect.move(1, 1); // Shape moved.
js
class Animal {
	constructor(name) {
		this.speed = 0;
		this.name = name;
	}

	run(speed) {
		this.speed = speed;
		alert(`${this.name} 은/는 속도 ${this.speed}로 달립니다.`);
	}

	stop() {
		this.speed = 0;
		alert(`${this.name} 이/가 멈췄습니다.`);
	}
}

let animal = new Animal('동물');

class Rabbit extends Animal {
	hide() {
		alert(`${this.name} 이/가 숨었습니다!`);
	}
}

let rabbit = new Rabbit('흰 토끼');

rabbit.run(5); // 흰 토끼 은/는 속도 5로 달립니다.
rabbit.hide(); // 흰 토끼 이/가 숨었습니다!
class Animal {
	constructor(name) {
		this.speed = 0;
		this.name = name;
	}

	run(speed) {
		this.speed = speed;
		alert(`${this.name} 은/는 속도 ${this.speed}로 달립니다.`);
	}

	stop() {
		this.speed = 0;
		alert(`${this.name} 이/가 멈췄습니다.`);
	}
}

let animal = new Animal('동물');

class Rabbit extends Animal {
	hide() {
		alert(`${this.name} 이/가 숨었습니다!`);
	}
}

let rabbit = new Rabbit('흰 토끼');

rabbit.run(5); // 흰 토끼 은/는 속도 5로 달립니다.
rabbit.hide(); // 흰 토끼 이/가 숨었습니다!

animal-rabbit-extends

클래스 문법은 단지 "구문적 설탕(Syntatic sugar)" 인가?

class-vs-function.png

References

Released under the MIT License.