A Developing Developer
09-2. 클래스의 고급 기능 본문
- 상속 : 어떤 클래스가 갖고 있는 유산(속성과 메소드)을 기반으로 새로운 클래스를 만드는 것
class 클래스 이름 extends 부모클래스 이름 {
}- 사각형 클래스와 정사각형 클래스(상속)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>사각형 클래스와 정사사각형 클래스</title>
<script>
// 사각형 클래스
class Rectangle {
constructor(width, height) {
this.width = width
this.height = height
}
// 사각형의 둘레를 구하는 메소드
getPerimeter() {
return 2 * (this.width + this.height)
}
// 사각형의 넓이를 구하는 메소드
getArea() {
return this.width * this.height
}
}
// 정사각형 클래스
class Square extends Rectangle { // extends : 상속
constructor(length) {
super(length, length); // super : 부모의 생성자 함수 호출
}
}
// 클래스 사용
const square = new Square(10, 20)
console.log(`정사각형의 돌레 : ${square.getPerimeter()}`)
console.log(`정사각형의 넓이 : ${square.getArea()}`)
</script>
</head>
<body>
</body>
</html>
- 상속은 어떤 클래스가 가지고 있는 속성과 메소드를 다른 클래스에 물려주는 형태로 사용
- 부모클래스 : 속성과 메소드를 주는 클래스
- 자식클래스 : 속성과 메소드를 받는 클래스
- private 속성/메소드 : 클래스 내부에서만 접근할 수 있는 속성/메소드
- 클래스 사용자가 클래스 속성을 의도하지 않은 방향으로 사용하는 것을 막아 클래스의 안정성을 확보하기 위해 나온 문법
class 클래스 이름 {
# 속성이름
# 메소드 이름() {
}
}- private 속성 사용 (#)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 정사각형 클래스
class Square {
#length // private 속성 선언
constructor(length) {
if (length <= 0){
throw '길이는 0 보다 커야합니다.'
}
this.#length = length
}
getPerimeter() {return 4 * this.#length}
getArea() {return this.#length * this.#length}
}
// 클래스 사용하기
const square = new Square(10)
square.#length = - 10 // 클래스 외부에서 접근 못하기때문에 Syntax 에러 발생
// square.length = -10 // private 속성 때문에 반영 X
console.log(`정사각형의 돌레 : ${square.getPerimeter()}`)
console.log(`정사각형의 넓이 : ${square.getArea()}`)
</script>
</head>
<body>
</body>
</html>
- 게터(getter) : getOO() 형태로 값을 확인하는 기능을 가진 메소드
- 세터(setter) : setOO() 형태로 값을 지정하는 기능을 가진 메소드
class 클래스 이름 {
get 이름 () { return 값 }
set 이름 (value) { }
}- get 키워드와 set 키워드 조합하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>get 키워드와 set 키워드 조합하기</title>
<script>
// 정사각형 클래스
class Square {
#length // private 속성 선언
constructor(length) {
this.length = length
}
get length () {
return this.#length
}
get perimeter() {return 4 * this.#length}
get area() {return this.#length * this.#length}
set length (length) {
if (length <= 0){
throw '길이는 0 보다 커야합니다.'
}
this.#length = length
}
}
// 클래스 사용하기
const squareA = new Square(10)
console.log(`한 변의 길이는 ${squareA.length}입니다.`)
console.log(`둘레 : ${squareA.perimeter}입니다.`)
console.log(`넓이 : ${squareA.area}입니다.`)
// 예외 발생시키기
const squareB = new Square(-10)
</script>
</head>
<body>
</body>
</html>
- static : 인스턴스를 만들지 않고 사용할 수 있는 속성과 메소드, 일반적인 변수와 함수처럼 사용 가능
class 클래스 이름 {
static 속성 = 값
static 메소드() {
}
}- static 사용 방법
클래스 이름.속성
클래스 이름.메소드()- static 키워드 사용하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>static 키워드 사용하기</title>
<script>
// 정사각형 클래스
class Square {
#length // private 속성 선언
static #counter = 0
static get counter() {
return Square.#counter
}
constructor(length) {
this.length = length
Square.#counter += 1
}
static perimeterOf (length) {
return length * 4
}
static areaOf (length) {
return length * length
}
get length () { return this.#length}
get perimeter() {return this.#length * 4}
get area() {return this.#length * this.#length}
set length (length) {
if (length <= 0){
throw '길이는 0 보다 커야합니다.'
}
this.#length = length
}
}
// 클래스 사용하기
const squareA = new Square(10)
const squareB = new Square(20)
const squareC = new Square(30)
console.log(`지금까지 생성된 Square 인스턴스는 ${Square.counter}개 입니다.`)
// static 메소드 사용하기
console.log(`한 변의 길이가 20 인 정사각형의 둘레는 ${Square.perimeterOf(20)}입니다.`)
console.log(`한 변의 길이가 30 인 정사각형의 넓이는 ${Square.areaOf(30)}입니다.`)
</script>
</head>
<body>
</body>
</html>
- 오버라이드 : 부모가 갖고 있는 메소드와 같은 이름으로 메소드를 선언해서 덮어 쓰는 것
- 오버라이드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>오버라이드</title>
<script>
class LifeCycle {
call() {
this.a()
this.b()
this.c()
}
a() { console.log('a() 메소드를 호출')}
b() { console.log('b() 메소드를 호출')}
c() { console.log('c() 메소드를 호출')}
}
class Child extends LifeCycle { // 오버라이드
a() {
console.log('자식의 a() 메소드 호출')
}
}
// 인스턴스 생성
new Child().call()
</script>
</head>
<body>
</body>
</html>
- 부모에 있던 내용 가져오기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>부모에 있떤 내용 가져오기</title>
<script>
class LifeCycle {
call() {
this.a()
this.b()
this.c()
}
a() { console.log('a() 메소드를 호출')}
b() { console.log('b() 메소드를 호출')}
c() { console.log('c() 메소드를 호출')}
}
class Child extends LifeCycle { // 오버라이드
a() {
super.a() // 부모의 a() 메소드 호출
console.log('자식의 a() 메소드 호출')
}
}
// 인스턴스 생성
new Child().call()
</script>
</head>
<body>
</body>
</html>
============================================================================================
출처 : 혼자 공부하는 자바스크립트
============================================================================================
내배캠4기 노드트랙 본 캠프 시작 하루전 일요일...
미루다 미루다 겨우 다했다(?)
아... ch10 리액트는 안하겠지 하고 패스... 몰라~
내일부터 본격적인 node 트랙 본 캠프가 시작된다.
9 to 9 이 두렵기는하지만, 완주한 나의 모습을 기대하며 오늘은 여기서 마무리하고,
그만 쉬어야 겠따...
(현재시각 : 저녁 9시 54분...)
20000
'내일배움캠프 4기 > [Javascript]혼자 공부하는 자바스크립트' 카테고리의 다른 글
| 10. 리액트 라이브러리 맛보기(보류) (0) | 2022.11.14 |
|---|---|
| 09-1. 클래스의 기본 기능 (0) | 2022.11.13 |
| 08-2. 예외 처리 고급 (0) | 2022.11.13 |
| 08-1. 구문 오류와 예외 (0) | 2022.11.13 |
| 07-2. 이벤트 활용 (1) | 2022.11.12 |
'내일배움캠프 4기/[Javascript]혼자 공부하는 자바스크립트' Related Articles
more
