[Javascript] 프로토타입 (Prototype) 간단한 이해

[Javascript / 자바스크립트] 프로토타입 Prototype 간단한 이해

 

 

 

자바스크립트 프로토타입에 대한  여러 자료를 검색 도중

프로토 타입 자체가 약간 복잡한 개념이라 그런지

대부분의 관련 자료를 검색했을때 이해가 잘 되지 않았다.

 

그래서 최대한 내가 이해한 내용을 바탕으로

블로그의 취지에 맞게 최대한 간단하게  메모하고자 한다

 

아래 두개의 예제는

객체 생성 함수 (Person)을 만들고 속성(name,age) 및 메소드(print)를

초기화하기 예제인데 모양만 다를뿐 같은 의미를 가진 코드이다

 

예제 1

일반적인 속성 및 메서드 추가

//일반적인 객체의 속성 및 메서드 초기화
function Person(name,age){
    this.name = name;
    this.age = age;
    this.print() = function(){
        console.log('이름 : '+ this.name + '  나이 : '+ this.age);
    }
}

const per = new Person();
per.print();

 

예제2

프로토 타입을 통한 속성 및 메서드 추가

//프로토 타입을 통한 객체의 속성 및 메서드 초기화
function Person(){

}

//프로토 타입을 통해 name 속성 생성
Person.prototype.name = '홍길동';

//프로토 타입을 통해 age 속성 생성
Person.prototype.age = 20;

//프로토 타입을 통해 name 속성 생성
Person.prototype.print = function(){
    console.log('이름 : '+ this.name + '  나이 : '+ this.age);
};

const per = new Person();
per.print();

 

두 예제의 차이를 통해 프로토 타입의 쓰임새는 어림잡아 알수 있을 것이다

 

 

PS. 조금 더 깊이 들어가자면..

자바스크립트에서는 Number, String, Boolean, Null, undefined를 제외한 모든 것은 객체이다.

당연히 함수도 객체이고 함수를 선언하였을때 어딘가에 함수 객체의 원형이 함께 생기는데

prototype키워드를 통해서 해당 객체의 constructor(생성자)에 접근하여

내부 속성 및 메소드를 추가할수 있는 것이다.

 

그리고 해당 함수를 통해 생성된 객체는 그 속성을 그대로 물려받아

예제2 처럼 추가된 속성과 메소드의 사용이 가능해진다