JavaScript 프로토타입(prototype) 이해

Object  (객체) 

서로 연관된 변수와 함수를 그룹핑해서 이름을 붙인 것 

var memberObject = {
    tami: 'name',
    developer: 'java',
    age:'25',
}

 

this

메서드가 자신이 속해있는 객체를 가리키는 키워드

객체가 내부적으로 가지고 있는 값을 참조할 수 있음 

var kim = {
    name: 'kim',
    first:10,
    second:20,

    sum: function(){
        return this.first+this.second;
    }
}

console.log(kim.sum()); //30

 

위의 예시의 객체는 수작업으로 만든 객체

객체를 찍어내는 동작을 따로 구현 하여 재사용 가능하게 해야함 

 

 

---

Prototype

javascript  는  prototype based language✨

 

 

생성자 안에서 메서드를 만드는경우 ( this.sum)

function Person(name, first, secod, third) {
    this.name= name;
    this.first = first;
    this.secod = secod;
    this.sum = function(){
        return this.first + this.second;
    }
}

var kim = new Person('kim',10,20);
console.log("kim.sun()",kim.sum());

 

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

생성자가 생성될 때마다 sum이라는 함수의 객체가 계속 새로 생성되고 있음  => 메모리 낭비 

 

생성자 Person 으로 만든 모든 객체가 공통적으로 사용하는 속성과, 함수를 만들어야 함 

 

생성자를 통해 만든 객체들이 공통적으로 사용하는 속성 만들기 

 

 

 

Prototype 사용하는 경우 

function Person(name, first, second, third) {
    this.name= name;
    this.first = first;
    this.second = second;
}
//Person이라는 생성자 함수의 모든 객체에서 사용할 메서드 생성
Person.prototype.sum = function(){
    return this.first + this.second;
}


var kim = new Person('kim',10,20);

console.log("kim.sun()",kim.sum());

sum은 한번만 실행 

sum은 Person에서 만든 모든 객체들이 공유함 => 메모리 절약 

 

 

function Person(name, first, second, third) {
    this.name= name;
    this.first = first;
    this.second = second;
}
//Person이라는 생성자 함수의 모든 객체에서 사용할 메서드 생성
Person.prototype.sum = function(){
    return 'prototype' + (this.first + this.second);
}


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


kim.sum = function(){
    return 'this'+(this.first + this.second);
}


console.log("kim.sun()",kim.sum());
console.log("lee.sun()",lee.sum());

1) 그 객체 자신이 sum이라는 속성을 찾음 

 : kim.sum 

2) 객체 생성자인 Prototype에 sum이라는 속성을 찾음 

: lee.sum은 따로 없으니 -> prototype.sum  씀 

 

 

 

🧐생각해볼 것 

 

프로토타입의 의미:

함수가 선언될때 자동으로 선언되는 속성개체 

그 생성자 함수로 만들어진 모든 객체는 그 함수의 porotype을 참조한다.

 

 

프로토타입을 사용하지 않고 생성자 안에서 메서드와 속성을 정의하면 발생하는 비효율 :

생성자가 생성될 때마다 메서드를 새로 만들기 떄문에 메모리 낭비가 심해진다.

하지만, 프로토타입을 만들면 생성자 함수가 만든 모든 객체들이

프로토타입을 통해 만들어진 메서드를 공유하며 재사용하고 메모리 효율이 높아진다.