[Following Life Coding] JavaScript Object-Oriented Programming _05. prototype

JavaScript Object-Oriented Programming

Life Coding class link: https://opentutorials.org/module/4047/24610

05. prototype

5-1. Example: spotting what needs improving 

prototype.js)  Variation on the previous example 

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());

Run result:

5-2. Example: improving it 

Use prototype to pull out properties that can be shared, and re-declare the prototype of the Person constructor from outside. 

prototype.js)  Variation on the previous example 

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());

Run result:

5-2. Applied example of the improvement

Use prototype for properties that are shared in common, and re-declare the prototype of the Person constructor from outside 

prototype.js)  Variation on the previous example 

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

Run result:

Egoing's Question 1. What is a prototype?

-> my answer: A reserved word that lets you define new properties on a constructor function. 

Egoing's Question 2. What inefficiencies can arise when you don't use prototype?

-> my answer: 1) Performance hit: a function defined inside a constructor is re-created every time an object is instantiated, whether or not you use it, which can drag performance down. 2) Inefficient maintenance: if you need to modify a function defined inside the constructor, you either have to touch it directly (with the security concerns that entails) or re-declare it on every object created by that constructor.  

Reference blogs recommended by Egoing 

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

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