Javascript prototype 프로토타입 이란? prototype을 사용하는 방법을 알아보자.

Javascript prototype 프로토타입 이란? prototype을 사용하는 방법을 알아보자.

 

자바스크립트의 모든 객체들은 부모 역할을 하는 객체와 연결 되어 있습니다. (최상위는 Object)

이런 부모 역할을 하는 객체를 javascript에서는 Prototype이라고 합니다.

 

예제를 보면서 Prototype에 대해 더 알아보도록 하겠습니다.

 

$(function(){
    const Student = function(name, korean, english, math){
        this.name = name;
        this.korean = korean;
        this.english = english;
        this.math = math;
    }
    console.dir(Student);
});

 

Student라는 생성자 함수를 만들어 dir을 찍어 보았습니다.

console 창을 확인하면 아래와 같이 __proto__ 가 있는 것을 확인 할 수 있습니다.

크롬에서는 이 __proto__가 자신의 Prototype을 가리킵니다.

 

 

형광색으로 칠한 부분을 위에서 부터 확인해 보죠.

(첫번째) Student 라는 이름의 함수(객체)이죠.

(두번째) 이것은 함수이기 때문에 기본적으로 function의 prototype을 상속 받습니다.

그러면서 기본적으로 function의 prototype이 갖는 다양한 메소드를 사용할 수 있죠. (apply, bind...등등)

(세번째) 함수 또한 object이기 때문에 object의 prototype 또한 상속 받아 사용할 수 있습니다.

이렇게 prototype의 메소드나 변수에 접근하는 것을 prototype chaining 이라고 합니다.

 

예를들어 console.log(Student.toString());  과 같이 호출이 가능합니다. (toString()은 object prototype의 메소드)

이제 prototype이 무엇이다 정도는 느낌이왔을 것이고, 사용법을 알아보도록 하겠습니다.

 

위의 코드에 평균을 구하는 average 메소드를 추가 해보겠습니다.

 

$(function(){
    const Student = function(name, korean, english, math){
        this.name = name;
        this.korean = korean;
        this.english = english;
        this.math = math;
        this.average = function(){
            return (this.korean+this.english + this.math)/3;
        }
    }
});

 

그리고 생성자 함수로 새 객체를 만들고

 

const student1 = new Student('이건', 100, 100, 100);

 

평균을 구해보죠.

 

console.log(student1.average());   ==> 100출력

 

평균이 잘 구해집니다. 하지만 이렇게 구현을 하게되면 Student 객체를 생성할 때마다 같은 기능을 하는

average 메소드가 중복적으로 객체에 생성되게 됩니다.

이런 문제를 해결하기 위해 average 메소드를 prototype의 메소드로 설정하겠습니다.

객체.prototype.메소드명 으로 생성합니다.

 

$(function(){
    const Student = function(name, korean, english, math){
        this.name = name;
        this.korean = korean;
        this.english = english;
        this.math = math;
    }
    Student.prototype.average = function(){
        return (this.korean + this.english + this.math)/3
    }
});

const student1 = new Student('이건', 100, 100, 100);
console.dir(student1);
console.log(student1.average());

 

 

 

코드를 실행해 console 창을 확인하면 위와 같이 __proto__안에 average 메소드가 있는 것을 확인 하실 수 있습니다.

student1.average()가 호출될때

자기 자신은 average 메소드를 가지고 있지 않기 때문에 프로토타입 체이닝이 발생하여

prototype에 있는 average 메소드가 실행된 것이죠.

 

이처럼 객체의 중복되는 메서드를 줄이는 방법으로 Prototype을 활용할 수 있습니다.