상속(Inheritance)
개념
코드의 재활용성을 높이는 프로그래밍 기법 - 자바스크립트의 정의
코드의 재활용성을 높이고 공통적인 규약을 제공하기 위한 객체지향의 특성. - 설계 측면의 정의
부모 클래스를 확장시켜 자식 클래스를 만드는 프로그래밍 기법. - 개발 측면의 정의
장점
- 유지보수성이 향상된다.
- 개발시간이 단축된다.
- 기능이 추가되어도 품질이 지속적으로 유지된다.
- 가독성이 향상된다.
단점
- 관리자의 오해가 발생할 수 있다.
문법 형식
class extented calss name extends base class name {}
상속의 생성자
super()
상속 시 상위 클래스의 object가 먼저 초기화되어야 하며 이를 지원하기 위한 문법이다.항상 하위 클래스 생성자에서 가장 앞에 코딩되어야 한다.
예시
<body>
<script>
class rectangle
{
constructor(_with, _height)
{
this.with = _with
this.height = _height
}
}
class square extends rectangle
{
constructor(length)
{
super(length, length)
}
}
</script>
</body>
문제
Rectangle 클래스와 Squre 클래스를 상속하시오.
둘레와 넓이는 구하는 함수를 제작하고 인스턴스의 width와 height값이 음수나 문자열이 생성되지 못하게 구현하시오.
<body>
<script>
class rectangle
{
#width
#height
constructor(_width, _height)
{
if (_width < 0 || _height < 0 || typeof(_width) !== 'number' || typeof(_height) !== 'number') {
throw 'parameter is not a number'
}
else {
this.#width = _width
this.#height = _height
}
}
getPerimeter(){
return 2 * (this.#width + this.#height);
}
getArea(){
return this.#width * this.#height;
}
get width() {
return this.#width
}
set width(_width) {
this.#height = _width
}
get height() {
return this.#height
}
set width(_height) {
this.#height = _height
}
}
class square extends rectangle
{
constructor(_length)
{
if (typeof(_length) === 'number' && _length > 0)
{
super(_length, _length)
}
else
{
throw 'parameter is not a number'
}
}
getLength() {
return this.width
}
}
const s1 = new square(5);
const r1 = new rectangle(5, 9)
console.log(s1.getArea())
console.log(r1.getPerimeter())
//25
//28
</script>
</body>참고
throw
https://cruella-de-vil.tistory.com/59
[JavaScript] throw(예외 발생)
throw throw문은 사용자 정의 예외를 발생(throw)할 수 있습니다. 예외가 발생하면 현재 함수의 실행이 중지되고 (throw 이후의 명령문은 실행되지 않습니다.), 제어 흐름은 콜스택의 첫 번째 catch 블
cruella-de-vil.tistory.com
class, private
https://cruella-de-vil.tistory.com/58
[JavaScript] Class(클래스), private(접근제어)
Class (클래스) 개념 ES5에서는 클래스가 없으며 객체형, 클로저, 생성자, 프로토타입 등을 이용해 클래스와 유사한 구조를 만들어 사용한다. ES5와 다르게 ES6에서는 클래스 문법을 직접적으로 지원
cruella-de-vil.tistory.com
'JavaScript' 카테고리의 다른 글
| [JavaScript] DOM (문서 객체) (0) | 2022.04.25 |
|---|---|
| [JavaScript] Static (0) | 2022.04.21 |
| [JavaScript] throw(예외 발생) (0) | 2022.04.21 |
| [JavaScript] Class(클래스), private(접근제어) (0) | 2022.04.20 |
| [JavaScript] Constructor 예제 (2) | 2022.04.19 |