JS) 객체, 프로토타입

객체

자바스크릡트의 객체는 이름과 값을 한쌍으로 묶은 집합입니다.

프로퍼티: 이름과 값이 한 쌍을 이룬 것. 값으로는 모든 데이터 타입을 저장 가능.

메서드: 함수의 참조를 값으로 가진 프로퍼티

프로토타입(prototype)

프로토타입은 모든 객체가 공통으로 가지고 있는 속성입니다. 자바스크립트에서는 함수도 객체이므로 함수 객체가 기본적으로 prototype 프로퍼티를 갖고 있습니다. 프로퍼티는 기본적으로 빈 객체를 가르킵니다.

생성자 안에서 메서드를 정의하는 방식의 문제점

function Number(a, b){
    this.a = a;
    this.b = b;
    this.sum = function(){
        return this.a + this.b;
    }
};

const c1 = new Number(1, 2);
const c2 = new Number(4, 5);
console.log(c1.sum()); // 3
console.log(c2.sum()); // 9

생성자 안에서 this 뒤에 메서드를 정의하면 그 생성자로 생성한 모든 인스턴스에 똑같은 메서드가 추가됩니다.(sum) 이러한 방법은 메모리를 소비하게 됩니다.

프로토타입을 사용하여 메서드 추가
이번에는 sum 메서드를 Number.prototype에 추가했습니다.
c1, c2 인스턴스에 sum 메서드가 존재하지는 않지만, sum 메서드를 사용할 수 있고, this 또한 생성자로 생성한 인스턴스를 가르킵니다.

function Number(a, b){
    this.a = a;
    this.b = b;
};

Number.prototype.sum = function(){
    return this.a + this.b;
}

const c1 = new Number(1, 2);
const c2 = new Number(4, 5);
console.log(c1.sum()); // 3
console.log(c2.sum()); // 9

이렇게 생성자의 프토토타입의 객체에 메서드를 추가하면 인스턴스에 메서드를 추가하지 않아도 인스턴스가 프로토타입 객체의 메서드를 사용할 수 있으므로 메모리의 낭비를 피할 수 있습니다.