[Javascript] 자바스크립트의 Prototype(프로토타입)

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

1. 정의

- 자바스크립트에서 객체지향 프로그램을 하기 위해 꼭 알아야 할것이 프로토타입(prototype) 이라고 한다

- 여기저기 찾다가 자바스크립트의 표준 문서와 다양한 블로그에서 정의한 걸 적었다

- object that provides shared properties for other objects -  ECMAscript

-note When a constructor creates an object, that object implicitly references the constructor’s “prototype” property for the purpose of resolving property references. The constructor’s “prototype” property can be referenced by the program expression constructor.prototype, and properties added to an object’s prototype are shared, through inheritance, by all objects sharing the prototype. Alternatively, a new object may be created with an explicitly specified prototype by using the Object.create built-in function.

- 프로토타입 객체를 참조하는 링크(_proto_)??

- 위 글을 참고하면 프로토타입 == 프로퍼티를 다른 객체와 공유하는 객체

- 생성자 함수와 연관되어 있다

2. 생성자의 구조

- 프로토타입을 알기 위해 생성자의 구조를 파악한다

1) 생성자 

function human(){ }

- human이라는 함수를 생성하면 내부적으로 위와 같은 구조가 생성된다

- Prototoype + Prototype object 위와 같이 순환 구조를 가진다

- 위와 같은 순환 구조는 아래의 코드에서도 확인 가능하다

3. Prototype Object (프로토타입 객체)

-  constructor가 되며 다른 객체들은 이 프로토타입 객체를 참조한다

- 다른객체의 원형이 되는 객체이다

function human(){ } var aa = new human();  

1)  prototype에 속성을 추가한다면

function human(){ } var aa = new human(); human.prototype.getName = function(){ return '퇴근'; } console.log(aa.getName());  

- 프로토타입 객체에 getName()가 추가될 것이다

2) 다른 객체에 속성을 추가 한다면

function human(){ } var aa = new human(); human.prototype.getName = function(){ return '퇴근'; } aa.getName = function(){ return '출근'; } console.log(aa.getName());  

-  프로토타입 객체를 참조하지만 자기 자신의 고유한 getName()를 가지고 있기 때문에 출력 값은 출근이 된다

- 이말은 이름을 다르게 한다면 객체의 참조를 통해 코드 재사용이 가능해 진다

4. Prototype(프로토타입)

- 프로토타입의 두가지 의미

1) 객체 생성 됬을 때 프로토타입을 참조하는 Link

2) 함수의 멤버인 prototype은 프로토타입 객체를 가리키는 속성 

- 결국 누군가가 프로토타입을 묻는 다면 생성자를 통해 만들어진 객체가 공유할 수 있는 객체 라고 한다면 어느 정도 맞지 않을까