[Javascript] 자바스크립트의 Prototype

26 Mar 2022 in Study on Web & Frontend

자바스크립트의 생성자함수

기존 자바스크립트의 객체

const object_learn = {
    first_name = Wookey,
    last_name = Kim,
    get_fullname = function () {
        return `$(this.first_name) $(this.last_name)`
    }
}

console.log(object_learn.get_fullname)

# 결과

Wookey Kim

간단한 객체는 위와 같이 만들 수 있다.

객체의 개수가 많아질 경우(Prototype)

그런데 만약에 같은 객체가 많아진다면?

const object_learn = {
    first_name = Wookey,
    last_name = Kim,
    get_fullname = function () {
        return `$(this.first_name) $(this.last_name)`
    }
}

const object_learn_1 = {
    first_name = Rwa,
    last_name = Kim,
    get_fullname = function () {
        return `$(this.first_name) $(this.last_name)`
    }
}

const object_learn_2 = {
    first_name = Kay,
    last_name = Kim,
    get_fullname = function () {
        return `$(this.first_name) $(this.last_name)`
    }
}

이렇게 만든다고 오류가 발생하지는 않는다.

하지만, 메모리 관리 측면에선 비효율적일 수 밖에 없다.

따라서, 우리는 prototype을 사용할 수 있다.

function user(first, last) {
    this.firstName = first
    this.lastName = last
}

user.prototype.get_fullname = function () {
        return `$(this.first_name) $(this.last_name)`
    }

const object_learn = new user('Wookey', 'Kim')
const object_learn_2 = new user('Rwa', 'Kim')
const object_learn_3 = new user('SW', 'Kwan')

console.log(object_learn.get_fullname)
console.log(object_learn_2.get_fullname)
console.log(object_learn_3.get_fullname)

# 결과

Wookey Kim
Rwa Kim
SW Kwan

같은 함수에 대해서 굳이 다시 생성할 필요 없이 필요할 떄 마다 한번만 참조할 수 있도록 해주는 기능이다.

그래서 메모리 관리 측면에서 사용하지 않을 때 보다 매우 효율적이다.

자바스크립트함수가 프로토타입 기반 언어라고도 불리는 이유가 여기에 있다.

이 모든 것을 통틀어서 자바스크립트의 클래스 개념이라 부르며,
다른 언어와의 클래스와는 다른 개념을 가지고 있다.