JavaScript - 프로토타입

생성자 함수는 일반 함수와 별반 차이가 없어보인다. 지금까지 만들어온 각각의 객체는 여러가지 속성들을 포함하고 또 여러가지 메서드를 함께 포함하는 객체를 만들었었다. 속성은 모든 객체가 다른 값을 가지게 되지만 메서드는 모두 같은 값을 가지게 된다. 

이것은 각각의 객체를 생성할 때 마다 동일한 함수를 계속해서 생성해왔다는 것이다. 적은 자료량이라면 상관없지만 자료량이 1000개 2000개씩 늘어나면 같은 함수를 그만큼 1000번 2000번 만큼 돌리는 비효율적인 일이 일어나는 것을 방지하는 것이 프로토타입(prototype)이다.

프로토타입은 생성자 함수로 생성된 객체가 공통으로 가지는 공간이다. 각각의 객체들이 하나의 공통된 프로토타입 공간으로 연결이 되어있는 형태를 취한다. 함수가 여러번 작동을해 메모리 소모를 줄여주는 것이 프로토타입 사용의 의의라고 볼 수 있다.

프로토타입의 객체 구조

객체안에 들어가야할 메서드는 모두 프로토타입 안에 넣어준다고 생각하면 편하다.

프로토타입(prototype)을 사용한 생성자 함수의 형태

// 생성자 함수를 생성 function Constructor(parameter1, parameter2, parameter3, parameterN){      this.key1=parameter1;      this.key2=parameter2;      this.key3=parameter3;      this.keyN=parameterN; }; // 프로토타입을 이용해 메서드를 생성 Constructor.prototype.methodCalculate1=function(){}; Constructor.prototype.methodCalculate2=function(){}; Constructor.prototype.methodAllSummery=function(){}; // 배열을 생성하고, new 키워드로 생성자 함수에 객체를 생성하고 값 입력 let constructors=[]; constructors.push(new Constructor(parameter1a,parameter2a,parameter3a,parameterNa)); constructors.push(new Constructor(parameter1b,parameter2b,parameter3b,parameterNb)); constructors.push(new Constructor(parameter1c,parameter2c,parameter3c,parameterNc)); constructors.push(new Constructor(parameter1d,parameter2d,parameter3d,parameterNd)); // 출력 let result=''; for(let i in constructors){      result+=games[i].methodAllSummery(); } console.log(result);

프로토타입을 이용한 생성자 함수 작성 예시

function Game(titel, type, language, price){
      this.제목=titel;
      this.장르=type;
      this.언어=language;
      this.가격=price;
}
 
Game.prototype.addtax=function(){
          return this.가격+this.가격*0.1;
};
Game.prototype.viewall=function(){
          return this.제목+' \t'+this.장르+' \t'+this.언어+' \t'+this.addtax()+'\n';
};
 
let games=[];
games.push(new Game('Call of Duty', 'FPS', 'Korean', 110000));
games.push(new Game('Rainbow Six', 'FPS', 'Korean', 55000));
games.push(new Game('Starcraft 2', 'RTS', 'Korean', 33000));
games.push(new Game('Super Mario', 'RPG', 'Korean', 78000));
games.push(new Game('Assasins Creed', 'RPG', 'Korean', 65000));
games.push(new Game('Ghost Recon', 'RPG', 'Korean', 120000)); 
 
let summery='제목\t\t\t장르\t언어\t가격\n';
for(let i in games){
      summery+=games[i].viewall();
}
console.log(summery);

프로토타입.html

0.00MB