JS 프로토타입과 클래스, new

String.prototype

을 사용하면 문자열에 사용할 수 있는 모든 프로토타입 메서드가 배열로 나온다.

String.prototype.yell = function () {
    console.log(this.toUpperCase());
}

이렇게 새로운 yell이라는 메소드를 만들어서 "hi".yell() 입력시 출력값으로 HI가 나온다.

존재하고 있는 메소드를 같은 이름을 써서 대체할 수도 있다. 

 

class Color { // class 로 새로운 객체를 만들때는 앞에가 대문자, 밑의 new도 동일
    constructor(r, g, b, name) {
        this.r = r; // this는 자동으로 새로운 객체를 참조  ( new를 사용하면 자동으로 빈 객체가 생기는데 그것을 참조한다. )
        this.g = g; // new를 사용하지 않으면 수동으로 빈 객체를 만들어야 한다. const color = {}; 이렇게
        this.b = b;
        this.name = name;
    }
    innerRGB() {
        const { r, g, b } = this; // this에서 r,g,b 객체들을 추출함
        return `${r}, ${g}, ${b}`; // 추출한 r,g,b객체들
    }
    rgb() {
        return `rgb(${this.innerRGB()})`;
    }
    greet() { // 메소드를 만들때는 이전과 같이 Color.prototype.rgb = function() 등이 필요 없고, 이렇게 넣어주면 class가 prototype에 넣어줌
        return `HELLO FROM ${this.name}!`;
    }
    rgb2() {
        const { r, g, b } = this;
        return `rgb(${r}, ${g}, ${b})`; // r,g,b를 변수로 따로 지정한 것이 아니기 때문에. 위에서 r,g,b 객체들을 this로 지정함
    }
}

const c1 = new Color(255, 67, 87, 'tomato') // 이것을 실행한후 log를 보면 prototype안에 있는것이 아닌 객체 안에 있다. 그 이유는 new 키워드를 사용했기 때문이다.
// protoype 안에는 사용하지 않은 greet 메소드가 들어있고 c1.greet() 를 사용하면 "HELLO FROM tomato!" 가 나온다.

직접 만들어보자