Class
class는 객체를 생성하기 위한 템플릿이다.
class Car {
// 맴버변수
speed
fuel
door
// 메서드
drive() {
this.speed++
this.fuel--
}
}
예시를 들어보자. 나는 방금 Car class를 선언하여 Car설계도(템플릿)를 만들었다.
이 class 안에서 쓰이는 변수를 멤버변수,
함수를 메서드
라고 부른다.
instance
const k3 = new Car()
const sclass = new Car()
new 연산자 사용하여 Car의 인스턴스를 생성할 수 있다.
일일이 k3에 speed, fuel..., sclass에 speed, fuel... 중복적으로 선언해주지 않아도, class에 정의된 멤버변수와 메서드를 사용해 줄 수 있다.
객체 지향 프로그래밍 패러다임은 하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 하는 객체를 만드는 것이다.
모델이 class가 되고 new 연산자를 사용하여 만들어진 객체는, 객체이자 클레스의 인스턴스가 된다.
서브 클래스
const k3 = new Car()
const sclass = new Car()
k3.drive()
sclass.drive()
앞에서 k3,와 sclass를 선언해 줬다.
그런데 drive 메서드를 사용해 줄 때, k3와 sclass의 연비가 같은 걸 볼 수 있다.
sclass의 연비를 바꿔주자.
기본 Car의 설계도가 아니라 Benz 회사용 설계도를 사용해 줘야겠다.
// subClass
class Benz extends Car {
drive() {
this.speed += 3
this.fuel--
}
엉따() {
return '엉덩이가 따뜻해요'
}
}
const sclass = new Benz()
서브클래스는 기존의 클래스의 변수(속성)와 메서드를 그대로 상속받아 쓸 수 있으며, 추가로 새로운 상속과 메서드를 더해줄 수 있다.
Benz의 설계도를 기존 Car 클래스에서 상속받아 만들어 줄 수 있다.
오버 라이딩
drive 메소드를 Benz 클래스에서는 기름 당 더 많은 거리를 갈 수 있게 바꿔주었다.
이렇게 기존 Car에 있었던 drive메서드를 Benz에 다시 정의해 줬을 때는, 상속받은 메서드가 아닌 자체 메소드가 사용되며,
이와 같이 똑같은 함수를 덮어씌우는 행위를 오버라이딩
이라고 부른다.
constructor 생성자
class Car {
speed
fuel
door
constructor(door) {
this.door = door
}
drive() {
this.speed++
this.fuel--
}
numberOfCarDoors() {
console.log("차문의 개수는" + this.door + "입니다.")
}
}
constructor 메서드는 객체의 기본 상태를 설정해 주고, new에 의해 자동적으로 호출되며 객체를 초기화할 수 있다.
let k3 = new Car(4)
k3.numberOfCarDoors()
new Car(10,4)
를 호출하면 다음과 같은 일이 일어난다.
- 새로운 객체가 생성된다.
- 넘겨받은 인수와 함께 constructor 가 자동으로 실행된다. 이때 4가 this.door에 할당된다.
위 과정을 거친 후에 k3.numberOfCarDoors() 같은 객체 메서드를 호출할 수 있다.
constructor 메서드는 클래스 안에 한 개만 존재할 수 있으며,
클래스에 생성자를 정의하지 않아도, 빈 메서드로 기본 생성자가 생성된다.
오버로딩
class Calculator {
add(a, b) {
return a + b
}
add(a, b, c) {
return a + b + c
}
}
const calculator = new Calculator()
console.log(calculator.add(1, 2)) // NaN
console.log(calculator.add(1, 2, 3)) // 6
오버로딩은 가변적인 매개변수를 받게 할 수 있다.
오버로딩은 사실 자바스크립트에는 없는 개념이다. 자바스크립트는 함수의 매개변수가 자유롭기 때문이다.
자바스크립트에서는 제일 아래에 선언한 함수가 같은 이름의 함수를 덮어씌워버린다.
따라서 위 코드를 실행했을 때, 첫 번째 console.log에서는 NaN이 나온다.
void overload(){
System.out.println("매개변수 0개");
}
void overload(int i, int j){
System.out.println("매개변수 "+ i + " 그리고 " + j);
}
void overload(double d){
System.out.println("매개변수 " + d);
}
하지만 다른 언어에서는 매개변수의 개수 도는 자료형에 따라서 함수를 다르게 선언해 줄 수 있다.
자바스크립트에서 가변적인 매개변수를 받고 싶다면, 분기처리를 해주면 된다.
function callback(a, b) {
if (b) {
console.log('문자열', a, b);
} else if (a) {
console.log('옵션 객체', a);
} else {
console.log('매개변수 없음');
}
}
overload('kim', 'sally', callback); // 문자열 kim sally
overload({ name: 'kim', value: 'sally' }, callback); // 옵션 객체 { name: 'kim', value: 'sally' }
overload(callback); // 매개변수 없음
'Front-end > JavaScript' 카테고리의 다른 글
[JavaScript] this란 무엇인가 (0) | 2023.01.15 |
---|---|
[JavaScript] callback (0) | 2022.11.26 |