이 포스팅은 Javascript 기초 시리즈 7 편 중 5 번째 글 입니다.

  • Part 1 - 01: Introduction
  • Part 2 - 02: async, defer
  • Part 3 - 03. 변수, ES5 문제
  • Part 4 - 04. Functions
  • Part 5 - This Post
  • Part 6 - 06. Object
  • Part 7 - 07. Array
▼ 목록 보기

목차

▼ 내리기

javascript reference

기본

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

    speak() {
        console.log(`${this.name} : HIHIHI!`);
    }
}

method 선언 방법을 주목해야 될 것 같다.

Getter & Setter

어떠한 객체를 설계하느냐에 따라서 정보를 가져올 때 손을 봐야한다.

객체 지향 프로그래밍은 기본적으로 객체가 행동하는 것을 추상화를 통해 구현하는 것이다. 그렇기 때문에 해당 객체에서 사용하는 값은 특정 boundary에서 귀속되어 있을 수 밖에 없다. 하지만 실제로 내가 만든 class를 기반으로 instance를 생성할 때, 사용자에게 모든 권리를 주게 된다면 내가 원하는 설계대로 안움직일 가능성이 너무 높다. 그니까 내 설계대로 움직이게 하기 위해서 안전장치를 하는 것. 이러한 목적을 캡슐화라 하고, 이 속성을 만족시키기 위해서 사용하는 함수가 Getter, Setter이다. 이 예에서는 age는 음수가 될 수 없기 때문에 이 부분을 고쳐보도록 하겠다.

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

    get age() {
        return this.age;
    }

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

하지만 이 코드를 진행하면 무한루프에 빠진다. 이 부분을 주의깊게 봐야하는데, get age()를 선언하는 순간, 이제 부터 this.age를 사용하면, get age() 함수를 호출한다. 또한 set age()를 선언하는 순간, 즉 this.age에 값을 할당 = 하는 순간, set age() 함수를 호출하게 된다. 여기서 set 함수를 호출 했기 때문에 해당 함수를 실행하게 되고, 내부 코드에는 다시 할당 =이 있기 때문에 다시 set을 호출한다. 그렇기 때문에 callstack이 초과되었다고 에러가 뜨는 것.

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

    get age() {
        return this._age;
    }

    set age(value) {
        // if (age < 0) {
        //     throw Error("도랏?");
        // }   
        // this._age = value;
        this._age = value < 0 ? 0 : value;
    }
}

이것을 방지하기 위해서는 해당 객체안의 property의 이름에 앞에 _를 추가해준다. 파이썬에서도 같은 방식으로 진행했었다. 이렇게 되면 constructor에서 age에 관련된 호출을 하게되면 getter, setter가 호출되고, 실질적으로 해당 객체 안의 property는 name, _age 로 구성된다.

Class Fields

C++에서 Class Keyword가 있었다. 이를 어떻게 하는지 간단하게만 보고 가자. 너무 최근에 (…)나와서 아직 브라우저가 못 먹는다.

class Experiment {
    publicField = 2;
    #privateField = 0;
}

Inherence

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

    draw() {
        console.log(`drawing #{this.color} color of`);
    }

    getArea() {
        return this.width * this.height;
    }
}

class Rectangle extends Shape {}
class Triangle extends Shape {
    draw(){
        super.draw();
        console.log("TTT");
    }

    getArea() {
        return (this.width * this*height)/2;
    }
}

Instanceof

해당 클래스의 객체인지 확인할 수 있다.