프로토타입, 클래스, 그리고 OOP

프로토타입 이란?

[JavaScript] 프로토타입과 프로토타입 체인 - 하나몬 (hanamon.kr)

[JavaScript] 프로토타입과 프로토타입 체인 - 하나몬

---

팩토리 함수와 생성자 함수

JavaScript-클래스 사용하기(팩토리, 생성자) (velog.io)

JavaScript-클래스 사용하기(팩토리, 생성자)

function Color(r,g,b) {
    this.r = r;
    this.g = g;
    this.b = b;
}

Color.prototype.rgb = function() {
    const {r,g,b} = this;
    return `rgb(${r}, ${g}, ${b})`;
}

Color.prototype.hex = function() {
    const {r,g,b} = this;
    return '#' + ((1<<24) + (r<<16) + (g<<8) + b).toString(16).slice(1);
}

Color.prototype.rgba = function(a=1.0){
    const {r,g,b} = this;
    return `rgba(${r},${g},${b},${a})`;
}

const color1 = new Color(40, 255, 60);
color1.hex();
const color2 = new Color(0, 0, 0);
color2.hex();

---

js 클래스

[JavaScript] 클래스 정의하고 사용하기 (상속 포함) : 네이버 블로그 (naver.com)

[JavaScript] 클래스 정의하고 사용하기 (상속 포함)

class Color {
    constructor(r,g,b,name) {
        this.r = r;
        this.g = g;
        this.b = b;
        this.name = name;
    }
    
    innerRGB() {
        const {r,g,b} = this;
        return `${r}, ${g}, ${b}`;
    }
    rgb() {
        return `rgb(${innerRGB()})`;
    }
    rgba(a=1.0) {
        return `rgba(${this.innerRGB()}, ${a})`;    
    }
    hex() {
        const {r,g,b} = this;
        return (
            '#' + ((1<<24) + (r<<16) + (g<<8) + b).toString(16).slice(1)
        );
    }
}

---

extends 키워드와 super 키워드

class Pet {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    eat() {
        return `${this.name} is eating`;
    }
}

class Cat extends Pet {
    meow() {
        return 'MEOWWWWWW';
    }
}

class Dog extends Pet {
    bark() {
        return 'WOFFF';
    }

    /*꼭 Pet에서 확장된 eat 함수를 사용할 필요가 없을 때 */
    eat() {
        return `new eat function is defined in Dog class`;
    }
}

Dog클래스 내에서 따로 eat 함수를 재정의 할 필요가 있을 때 위 처럼 구현하면 된다.

 

class Pet {
    constructor(name, age) {
        this.name = name;
        this.age = age;
        console.log("Using Pet constructor!");
    }
    eat() {
        return `${this.name} is eating`;
    }
}

class Cat extends Pet {
    constructor(name, age, livesLeft=9){
        console.log("Using Cat constructor!");
        super(name, age);
        this.livesLeft = livesLeft;
    }
    meow() {
        return 'MEOWWWWWW';
    }
}

class Dog extends Pet {
    bark() {
        return 'WOFFF';
    }

    /*꼭 Pet에서 확장된 eat 함수를 사용할 필요가 없을 때 */
    eat() {
        return `new eat function is defined in Dog class`;
    }
}

 

Cat 클래스 내에서 생성자 함수를 통해 새로운 변수를 추가하고 싶을 때인 경우다.

super 키워드가 super 클래스의 참조 항목이 된다는 것이 중요하다. 위 super 키워드를 사용한 구문에선 확장시키는 클래스, Pet의 참조다.

 

위에서 말했던 것들은 흔히 쓰인다. 기본 클래스가 있고, 거기서 확장된 다른 클래스가 있는 패턴이다.

저기서  Animal에서 확장한 Pet이나, LivingThing에서 확장한 Animal처럼 더 많은 레벨까지 계속 진행할 수도 있다.

비슷하게 대여섯 개의 클래스에서 확장된 DOM의 HTML 요소 같은 경우도 나올 수 있다.

뭔가를 확장시키고 클래스를 정의하는 경우엔 생성자 함수를 설정해서 new 키워드로 호출하고 메서드를 프로토타입에 추가하면 된다는걸 기억하자.

 

JavaScript : extends / super (velog.io)

JavaScript : extends / super