prototype

JS에서 prototype이 필요한 이유

function Person(name, fir, sec, thi) {
    this.name = name;
    this.fir = fir;
    this.sec = sec;
    this.thi = thi;
    
    this.sum = function() {
    	return this.fir + this.sec + this.thi;
    }
}

const kim = new Person('kim', 100, 100, 100);
console.log(kim.sum()); // 300

kim.sum = function(){
    return (this.fir + this.sec )/ this.thi
}
console.log(kim.sum()); // 2

const park = new Person('park', 50, 500, 150);
console.log(park.sum()); // 700

위의 코드에서 생성자가 실행이 될 때마다, 객체의 sum이라는 함수가 새로 만들어지고 있다.

=> 컴퓨터의 메모리 낭비 원인이 된다.

 

위에선 2개의 객체밖에 없지만, 객체의 수가 많아진다면, 객체를 생성할 때마다, 함수를 생성하는 시간이 많아질 것이고 결국 메모리가 많이 낭비될 것이다.

 

Person이라는 생성자를 사용하는 모든 객체에 sum이라는 함수를 다 바꾸고 싶으면 어떻게 해야 할까?

생성자 안에서 메서드를 만드는 것이 갖는 단점. 즉, 생산성이 떨어진다.

공통적으로 사용되는 함수를 만드는 것이 가능할까?

function Person(name, fir, sec, thi) {
    this.name = name;
    this.fir = fir;
    this.sec = sec;
    this.thi = thi;
}

Person.prototype.sum = function() {
    return this.fir + this.sec + this.thi;
}

const kim = new Person('kim', 100, 100, 100);
const park = new Person('park', 50, 500, 150);

console.log(kim.sum()); // 300
console.log(park.sum()); // 700

sum 함수를 Person 생성자 함수 안에 있지 않기 때문에, 생성자가 실행될 때마다 만들어지지 않는다.

=> 한 번만 실행되기 때문에 메모리 절약도 된다.

또한, sum 함수를 한 번만 호출하면, Person 생성자를 이용한 여러 개의 객체들이 sum함수를 공유할 수 있다.

 

프로토타입은 객체가 생성될 때마다, 해당 객체의 메서드를 만들어 메모리에 할당을 해야 하는데 그렇게 하지 않고 생성자의 프로토타입에 정의함으로써 다른 모든 객체들이 참조하여 사용할 수 있도록 하여 메모리를 효율적으로 사용할 수 있도록 하는 장점과 메서드의 재정의가 필요한 객체들은 상황에 맞게 자신만 사용 가능한 메서드를 재정의 할 수 있어 유지보수에도 많은 도움이 된다.