[Js] Prototype 이해하기

자바스크립트의 프로토타입

프로토타입이란 의미 자체가 원형, 원본이라는 뜻입니다.

자바스크립트에서 말하는 프로토타입 역시 문법적인 의미에서 크게 벗어나지 않습니다.

자바스크립트는 클래스라는 개념이 없는 대신 기존의 객체를 복사해서 새로운 객체를 생성해줍니다.

이는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어냅니다. 이렇게 생성된 객체는 또 다른 객체의 원형이 될 수도 있고요. 

간단하게 프로토타입 예제를 보여드리겠습니다.

 

 

function Animal(type, name, sound){
     this.type = type;
     this.name = name;
     this.sound = sound;
     this.say = function(){
     console.log(this.sound);
     }
}

const dog = new Animal('개', '해피', '멍멍');
const cat = new Animal('고양이', '여름', '야~옹');

dog.say();
cat.say();

 

객체는 Animal 이라는 함수를 통해서 dog와 cat이라는 객체를 생성했습니다.

이들은 각자 4개의 속성을 가지며 데이터 또한 동일합니다.

 

prototype Object

함수를 정의하면 생성되는 객체입니다.

함수를 정의하면 함수와 함께 prototype object가 생성되는 것입니다.

prototype object는 기본적인 속성으로 constructor와 prototype link(__proto__)를 가지고 있습니다.

자바스크립트에서 함수가 정의될 때 함수는 기본적으로 Constructor(생성자)가 부여됩니다.

생성자가 부여된 함수는 new를 통해서 객체를 생성할 수 있게됩니다.

또한 protorype object가 생성되며 object와 함수가 가지고 있는 prototype 속성과 연결이 됩니다.

 

prototype Link

자신을 만들어낸 객체의 원형을 참조합니다.

* __proto__

 

constructor

함수를 정의하면 생성자 자격이 부여됩니다.

new 키워드를 이용해 객체를 만들어낼 수 있습니다.

 

* 함수 객체는 자식에게 상속할 프로퍼티를 포함하는 프로토타입을 가지고 있습니다.

Array나 Function 객체들도 프로토타입의 상속을 기반으로 합니다. 내부적으로 가지고 있는 메서드들은 바로 이 상속을 기반으로 가능한 것입니다.

객체의 생성은 함수 객체에 의해 일어나지만, 상속에 관련된 모든 역할은 생성자 객체에 연결되어 있는 프로토타입 객체에 의해 일어난다는 것을 기억합시다.

 

* 자바스크립트에서는 별도의 클래스 타입이 없기 때문에 함수 형태로 클래스를 만들어줍니다.

이때 함수명은 첫 글자에 대문자를 사용하여 클래스로 사용되는 함수임을 명시해줍니다.