클래스 (+ 상속)

 

 

 

---

 

클래스는 어떻게 사용할까?

 

 

---

 

 

 

 

클래스

 

--

클래스를

프로토타입의 Syntacitc Sugar라고 부르기도 한다.

(Syntacitc Sugar = 복잡한 문법을 보다 사용하기 편하게 만든 것)

 

예전에는

생성자 함수와 프로토타입을 사용하여 지금의 클래스와 비슷한 기능을 수행했지만

해당 방법은 다른 언어들의 객체지향 방식과는 다르기 때문에 클래스 방식이 생겼다.

(단, 생성자 함수와 클래스의 동작이 완전 동일하지는 않다.)

 

 

클래스 작성 형식

class 클래스명 {
    필드명: 값;
    ...
    constructor (매개변수1, ...) {		// 생성자
        this.필드명 = 값;
        ...
    }
    메서드() {
        ...
    }
}

 

예시코드

class car {
    constructor (name, color) {
        this.name = name;
        this.color = color;
    }
    carIntroduce() {
        return `해당 자동차의 이름은 ${this.name}이고, ${this.color} 색상입니다.`;
    }
}

const car1 = new Car('aaa', 'balck');
const car2 = new Car('bbb', 'yellow');
const car3 = new Car('ccc', 'blue');

console.log(car1, car1.carIntroduce());
console.log(car2, car2.carIntroduce());
console.log(car3, car3.carIntroduce());

-----------------------------------------------------
Car { name: 'aaa', color: 'balck' } 해당 자동차의 이름은 aaa이고, balck 색상입니다.
Car { name: 'bbb', color: 'yellow' } 해당 자동차의 이름은 bbb이고, yellow 색상입니다.
Car { name: 'ccc', color: 'blue' } 해당 자동차의 이름은 ccc이고, blue 색상입니다.

자바스크립트의 클래스에서는
동적 특성으로 인해 생성자에서 바로 필드 선언과 초기화가 가능하다.
즉, 생성자에서 this.name = name;을 실행하면 
this가 가리키는 객체에 name이라는 속성이 자동으로 생성되고 값이 할당된다.

 

 

constructor 메서드 (생성자)

생성자는

인스턴스 생성 시 인자를 받아 속성(프로퍼티)들을 초기화할 수 있다.

 

규칙

• 클래스에 최대 하나의 constructor(생성자)만 존재 가능
• 이름은 무조건 constructor로만 작성
• 생성자의 매개변수에 기본값 정의 가능

 

예시 코드

class Car {
    constructor (name, color = 'black') {
        this.name = name;
        this.color = color;
    }
}

const car1 = new Car('aaa');
const car2 = new Car('bbb', 'blue');

 

 

 

메서드

class Car {
    sound() {
        return '부릉부릉';
    }
}

const car1 = new Car();
console.log(car1, car1.sound());

 

보면 car1 객체 자체에는 sound() 메서드를 가지고 있지 않고

프로토타입안에 담겨져 있다.

 

사용은 인스턴스에서 하지만

인스턴스가 직접 가지고 있는 것이 아니라 

사용할 때마다 클래스에서 가져와서 사용하는 것이다.

 

 

 

필드

다른 객체지향의 클래스처럼 필드를 정의할 수 있다.

 

예시 코드

class Car {
    name = 'aaa';
    color = 'black';
    sound() {
        return '부릉';
    }
}

--

 

 

 

 

정적(static) 필드 및 메서드

 

--

정적 필드 및 메서드는

클래스 자체에 속하는 필드 및 메서드로

인스턴스가 아니라 클래스 자체에서 직접 호출하여 사용해야 한다.

(정적 메서드에는 정적 필드만 사용 가능하다. / 같은 메모리에 있는 값만 사용 가능)

 

기본 형식

static 필드명

static 메서드명() {
}

 

예시 코드

class Car {
    static brand = "현대";
    
    name = "aaa";
    color = "balck";
    
    static contact() {
        return `${this.brand} 서비스 센터입니다.`;
    }
}

console.log(Car);
console.log(Car.brand);
console.log(Car.contact());

------------------------------------------
[class Car] { brand: '현대' }
현대
현대 서비스 센터입니다.

--

 

 

 

 

접근자 프로퍼티  (getter, setter)

 

--

객체의 속성 값을 직접 접근하지 않고

함수(메서드)를 통해 값을 설정하거나 가져오는 방식을 제공하는 프로퍼티다.

get, set 키워드를 사용한다.

 

예시 코드

const person = {
    age: 17,
    
    get nowAge() {
        return this.age;
    }
    
    set updateAge(setAge) {
        this.age = setAge;
    }
}

class person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    get title() {
        return `${this.name}은 ${this.age}세`;
    }
    
    set updateAge(newAge) {
        if (typeof newAge !== 'number') return;
        if (newAge <= 0) return;
        this.age = new age;
    }
}

--

 

 

 

 

은닉  (Encapsulation)

 

--

자바에서 private 키워드를 사용하는 것처럼

객체 내부의 값을 감춰서 외부에서 접근을 못하도록 하는 것이다.

단, 해당 내부에서는 서로 접근이 가능하다.

(기본적으로 public으로 정의되어 은닉이 안됨)

 

private 필드는 #키워드를 붙여서 정의한다.

 

예시 코드

class Test {
    #name = '';
    #age = 0;
    
    constructor (name, age) {
        this.#name = name;
        this.#age = age;
    }
}

const aaa = new Test('홍길동', 28);

console.log(aaa);
console.log(aaa.#name);			// 접근 불가로 오류 발생
console.log(aaa['#name']);		// undefined 반환

 

목적

• 데이터 보호  :  잘못된 데이터 수정이나 불필요한 접근을 방지
• 코드의 독립성 유지  :  코드 변경 시 외부 코드에 영향을 최소화
• 유효성 검사  :  메서드를 통해 데이터가 조건에 맞는지 검증 가능
• 캡슐화된 코드의 재사용성 증가

--

 

 

 

 

상속

 

--

상속은

기존 클래스(부모 클래스)의 기능을 그대로 물려받아 

이어서 새로운 클래스(자식 클래스)를 만드는 개념으로

공통된 기능을 상위 클래스에서 정의하고, 이를 하위 클래스가 재사용하거나 확장할 수 있도록 하는 것이다.

 

기본 형식 ("extends" 키워드를 통해 상속)

class a클래스 {
}

class b클래스 extends a클래스 {
}

 

 

예시 코드

class Bird {
    wings = 2;
}

class ABird extends Bird {
    foot = 2;
}

class BBird extends Bird {
    fly () {
        console.log("날고 있음");
    }
}

class BigBird extends BBird {
    size = "XL";
}


const aaa = new BigBird();
console.log(aaa.wings);

---------------------------------
2

 

 

 

오버라이딩

자식 클래스에서 부모로부터 물려받은 속성, 기능(메서드)을 재정의하여 덮어씌우는 것을 말한다.

 

예시 코드

class Bird {
    wings = 2;
}

class ABird extends Bird {
    fly () {
        console.log("날고 있음");
    }
}

class BigBird extends BBird {
    size = "XL";
    wings = 4;			// 재정의
    fly() {
        console.log("쉬는 중");		// 재정의
    }
}


const aaa = new BigBird();
console.log(aaa.wings);

---------------------------
4

--