prototype

박성현·2020년 3월 24일
0

prototype

function person(name,first,second,third){
 this.name=name ,
 this.first = first,
 this.second = second,
 this.third = third,
 this.sum = function(){
    return this.first + this.second+this.third;
 } 
}
console.log(new person())

생성자함수로 만든 person 함수이다, 역시 거슬리는 부분이 있다 바로 sum 이다,만약 이번에도 100개의 person을 이용한 객체를 만들었다고 할때 sum 은 100개의 중복된 코드가 될 것이기 때문이다.

let kim = new person('kim', 10, 20);
kim.sum = function(){
  return 'modified : ' + (this.first + this.second);
}

이런식으로 sum을 바꿔줄수가 있지만, 만약 100개의 함수를 바꿔준다고 생각하면 아주 좋지않다,그러면 person을 이용한 객체가 공통적으로 사용할수있는 함수 나 속성이 있다면 얼마나 편할지 상상이 아주 잘 간다.
그것이 바로 prototype이 필요한 이유일 것 이다.

function person(name,first,second){
 this.name = name ,
 this.first = first,
 this.second = second
}

person.prototype.sum = function(){
  return this.first + this.second;
} 

let kim = new person('kim', 10, 20);
let lee = new person('lee', 10, 10);
console.log(kim.sum())
console.log(lee.sum())

결과값으로는 30, 20 이 아주 잘 출력이 될 것이다.
즉 prototype.sum을 따로 정의해줌으로서 객체가 만들어질떄마다 불필요한 실행이 사라질 것이고 한번만 정의 되기떄문에 메모리도 절약 할 수 있다

let kim = new person('kim', 10, 20);
kim.sum = function(){
  return 'hello :' + (this.first + this.second);
}
let lee = new person('lee', 10, 10);
console.log(kim.sum())
console.log(lee.sum())


이런식으로 sum의 리턴값을 바꿔줄수도있는데 여기서 prototype의 특징을 알수가 있는데, 객체 자신이 sum 이라는 메소드를 호출할 때 자신이 sum이라는 속성을 가지고있는지 찾고 그 속성이있다면 재정의된 값을 출력할 것 이고 자신이 가지고 있지 않다면 객체의 생성자인 person 의 prototype 의 sum 이라는 메소드가 있는지 찾을것이고 찾아졌다면 그 sum 을 실행하게 될 것이다.

요약을 하자면 프로토 타입은 객체를 정의하는 시점이 아닌, 필요한 시점에 정의 할수 있기 때문에 메모리 이점이 있고, 생성된 모든 객체가 공통으로 프로토타입을 사용할 수 있고 재정의도 가능하다.

profile
FrontEnd Developer

0개의 댓글