javascirpt : 클래스 선언과 속성

javascript에서 class를 선언하고 생성자를 선언하는 방식은 constructor을 이용한다.

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

function Rectangle(width,height){
    this.width = width;
    this.height = height;
}

두개의 차이점은 많지가 않다.

 

메서드 선언에서는 프로타입 안에 선언하는 것이 아니라, class 블록 내부에 선언하게 됩니다.

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

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

const rectangle = new Rectangle(100,200);
console.log(rectangle.getArea());

function을 이용한 class선언은 prototpye을 이용하여 선언한다.

 

function Rectangle(width, height) {
    this.width = width;
    this.height = height;
}

Rectangle.prototype.getArea = function () {
    return this.width * this.height;
};

var rectangle = new Rectangle(100, 200);
console.log(rectangle.getArea());

 

 

java와 비슷하게 getter와 setter를 선언한다.

class Rectangle {
    constructor(width, height) {
        this._width = width;
        this._height = height;
    }

    get width(){
        return this._width;
    }

    set width(input){
        this._width = input;
    }

    get height(){
        return this._heigth;
    }

    set height(input){
        return this._heigth = input;
    }

    getArea() {
        return this._width * this._height;
    }
}

const rectangle = new Rectangle(100,200);
rectangle.width = 200;

console.log(rectangle.width);
console.log(rectangle.getArea());

일반적으로 "절대 개발한 나말고 만지지 말아주세요!"라는 표현을 할려면 변수 앞에 _ 을 붙인다.

 

게터와 세터는 메서드를 선언할 때 앞에 get 또는 set을 붙여 선언합니다. get을 붙여 만든 메서드는 rectangle.width처럼 '값을 가져오는 행위'를 할 때 자동으로 호출됩니다.

 

class Square extends Rectangle {
    constructor(length) {
        super(length, length);
        console.log(this);
    }

    set width(input) {
        this._width = input;
        this._height = input;
    }

    set height(input) {
        this._width = input;
        this._height = input;
    }
}

const square = new Square(100);
console.log(square.getArea());

Square { _width: 100, _height: 100 }
10000