[생활코딩 따라가기] javascript 객체 지향 프로그래밍_05. prototype

javascript 객체 지향 프로그래밍

생코 수업 Link : https://opentutorials.org/module/4047/24610

prototype - JavaScript 객체 지향 프로그래밍

 

05. prototype

5-1. 개선사항 인식하기 예제 

prototype.js)  이전 예제 변형 

function Person(name,first,second){
    this.name = name,
    this.first = first,
    this.second = second,

    // 이슈1. 함수의 경우, 해당 객체가 생성자에 의해 생성할 때마다 이 함수 또한 매번 생성되어 성능 저하의 원인이 될 수 있다. 
    this.sum = function(){    
        return this.first+this.second; 
    }
}

var kim = new Person("kim",10,20);
kim.sum = function(){
    return "modified : " + (this.first+this.second);    // 이슈2. sum을 변경하게 되는 경우 
}
var lee = new Person("lee",10,10);
lee.sum = function(){
    return "modified : " + (this.first+this.second);    // 이슈2. 모든 객체에 동일하게 추가해야 한다. 
}

console.log(kim.name, " 's sum : ",kim.sum());
console.log(lee.name, " 's sum : ",lee.sum());

실행 결과)

생성된 객체에서 person의 내부 함수의 속성을 변경하여 출력한 결과

 

 

5-2. 개선하기 예제 

공통적으로 사용할 수 있는 속성을 prototype을 활용해서, 외부에서 생성자 person 함수의 원형을 재 선언하기 

prototype.js)  이전 예제 변형 

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

Person.prototype.sum = function(){    
    return "prototype 활용 : "+(this.first+this.second); 
}

var kim = new Person("kim",10,20);
var lee = new Person("lee",10,10);

console.log(kim.name, " 's sum : ",kim.sum());
console.log(lee.name, " 's sum : ",lee.sum());

실행 결과)

 person 함수의 내부 요소를 빼서, prototype를 통해 외부에서도 내부 속서을 설정할 수 있다.

 

 

5-2. 개선하기 예제 응용

공통적으로 사용할 수 있는 속성을 prototype을 활용해서, 외부에서 생성자 person 함수의 원형을 재 선언하기 

prototype.js)  이전 예제 변형 

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

Person.prototype.sum = function(){    
    return "prototype 활용 : "+(this.first+this.second); 
}

var kim = new Person("kim",10,20);
kim.sum=function(){ // sum 함수, 개별 조정 
    return "개별 조정 : " +(this.first+this.second); 
}

var lee = new Person("lee",10,10);
var Park = new Person("Park",50,20);


console.log(kim.name, " 's sum : ",kim.sum());      // 개별 조정 sum
console.log(lee.name, " 's sum : ",lee.sum());      // 공통 sum
console.log(Park.name, " 's sum : ",Park.sum());    // 공통 sum

실행 결과)

prototype을 통해 공용함수 선언 후, 공용 함수를 특정 객체에서만 다르게 사용할 수 있도록 재정의한 결과

 

 

 

egoing의 질문1. 프로토타입은 무엇인가요?

-> my : 생성자 함수에 새로운 속성을 정의할 수 있도록 해주는 예약어 

 

egoing의 질문2. 프로토타입을 사용하지 않는 경우 어떤 비효율성들이 발생할 수 있나요?

-> my : 1) 성능 저하 : 생성자 함수 내부에서 정의된 함수는 사용 여부를 떠나, 해당 객체가 생성될 때마다 생성되기 때문에 성능을 저하시키는 원인이 될 수 있다. 2) 비효율적인 유지보수 : 생성자 함수 내부에서 정의된 함수를 수정해야 하는 경우, 보안 이슈를 무릅쓰고 직접 접근해서 수정을 하거나, 생성자 함수로 생성된 객체 각각 재선언을 해줘야 한다.  

 

egoing이 추천하는 참고 블로그 들 

https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

[Javascript ] 프로토타입 이해하기

http://www.nextree.co.kr/p7323/

JavaScript : 프로토타입(prototype) 이해