Java Script - Class

몰랐던 것 위주로 작성

 

1. Getter, Setter

프로그램 캡슐화 (은닉성 보장)를 하기 위해 자바 스크립트에서도

Getter, Setter 를 사용한다

'use strict';

//class

class Person {
    constructor(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }

    get age() {
        return this.age;
    }

    set age(value) {
        this.age = value;
    }
}

const person1 = new Person('Steve', 'job', -1);
console.log(person1.age);

이걸 실행하면 콜 스택이 초과되었다고 나온다 (스택 오버 플로어)

즉 무한 뺑뺑이를 돌았다는 말..ㅋㅋ

 

get을 정의하면

생성자 안의 this.age = age 가 메모리의 age를 불러와 대입하는 것이 아니라

get age를 호출하게 된다.

 

set을 정의하면

생성자 안의 this.age=age에서 =age 부분에서 값을 할당할 때

메모리 안의 age를 가져오는 것이 아니라

set age를 호출한다고 함

그리고 this.age=value; 여기서

=value 부분에서 전달된 value를 메모리에 업데이트 하는 것이 아니라

다시 set age를 호출함

이렇게 무한반복 돼서 스택 오버 플로우 발생

 

이걸 방지하려면 getter와 setter 안의 변수 이름을 좀 다르게 써준다고 함

보통 _age 이렇게 _(언더바) 를 붙여준다고 합니다

'use strict';

//class

class Person {
    constructor(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }

    get age() {
        return this._age;
    }

    set age(value) {
        this._age = value;
    }
}

const person1 = new Person('Steve', 'job', -1);
console.log(person1.age);

 

나이에 마이너스 값을 못 넣도록 에러를 날려줌

'use strict';

//class

class Person {
    constructor(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }

    get age() {
        return this._age;
    }

    set age(value) {
        if (value < 0) {
            throw Error('이런 값은 들어갈 수 없습니다');
        }
        this._age = value;
    }
}

const person1 = new Person('Steve', 'job', -1);
console.log(person1.age);

 

 

 

 

 

2. public, private

다른 언어랑 달라서 정리해봄

클래스 안에서 멤버변수 앞에 한정자를 달지 않으면

private으로 설정된다고 알고 있었는데

 

자바 스크립트에서는 한정자를 안달면 public 이라고 함 

private 으로 사용한다면 #을 앞에 붙여줌

 

 

class AccessModifiers {
    publicField = 2;
    #privateField = 3;
}

const accessModifiers = new AccessModifiers();
console.log(accessModifiers.publicField);
console.log(accessModifiers.privateFrield);

. 으로 접근도 안되고 찍어봐도 undefined라고 나온다

 

 

뷰티파이 끄고 해야함 (설정에 format on save 체크 해제)

저장할 때마다 자꾸 #을 2; 옆으로 옮김ㅋㅋ

 

 

익숙한 대로 public, private를 이렇게 명시하면

빨간 줄 그어주고 이런건 typescript에서나 쓰라며 경고를 날려줌

class AccessModifiers {
    public publicField = 2;
    private privateField = 3;
}

const accessModifiers = new AccessModifiers();
console.log(accessModifiers.publicField);
console.log(accessModifiers.privateFrield);

 

물론 실행도 안된다.

 

 

 

3. 상속은 자바처럼 extends 키워드를 사용한다

class Shape{
    constructor(width,height,color){
        this.width=width;
        this.height=height;
        this.color=color;
    }

    draw(){
        console.log(`${this.color}색으로 칠합니다`);
    }
    getArea(){  //마우스 올려보면 반환 타입이 자동으로 number가 된다..안적어도 되넹..
        return this.width * this.height;
    }

}
class Rectangle extends Shape {}
class Triangle extends Shape {
    //overriding - 다형성을 보여주자
    getArea(){
        return (this.width * this.height)/2;
    }
}

const rectangle = new Rectangle(20, 20, '파랑');
rectangle.draw();
console.log(rectangle.getArea());

const triangle = new Triangle(10,10,'빨강');
triangle.draw();
console.log(triangle.getArea());

 

 

4. instanceOf

이 인스턴스가 이 클래스의 인스턴스인가 T/F 반환

모든 오브젝트는 모두 Object 를 상속받는다

console.log(rectangle instanceof Rectangle);    //True
console.log(triangle instanceof Rectangle);     //False
console.log(triangle instanceof Triangle);      //True
console.log(triangle instanceof Shape);         //True
console.log(triangle instanceof Object);        //True

 

 

 

자바 스크립트에 빌트인 된 오브젝트 목록

JavaScript reference

 

 

 

참고한 영상

www.youtube.com/watch?v=_DLhUBWsRtw&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=6