[Javascript] Prototype 을 통한 상속 과 __proto__ +(MDN 예제로 보는 Prototype 상속)

 

자바스크립트에서 class란?

 

생성자함수 생성

함수 호출

객체 생성 

시 내부 구현

크롱의 수업과 생활코딩 js 객체지향 프로그래밍을 참조하여

MDN에 잇는 Class Model 상속예제 -> Constructor function 과 prototype을 이용하여 상속을 구현해 보았다.

 

 

Class 를 이용한 상속 

 

Javascript는 프로토타입 based 언어

원래는 class 가 있기 전에 생성자 함수를 이용하여 상속을 구현했다.

따라서 Class 의 extends 를 프로토타입을 통해 구현해보자

 

 

 

 

 

 

Constructor function (생성자 함수) 및 객체 생성 

 

1) Car (부모)  , Model (자식) 이라는 생성자 함수 생성

각자의 Prototype 객체가 생성됨 ( Car's prototype , Model's prototype) 

 

2) New 연산자를 이용해 mycar 객체 생성

__proto__ 

  : 객체가 가지게 되는 속성

  : 자신을 생성한 생성자 함수의 Prototype 이 가리킨 객체를 가리키게 됨 

 

 

3)  mycar.show() 호출  

  1) mycar.show() 찾기  -> X

  2) __proto__가리키는 show() 찾기 -> O

 

Model의 show를 보면 Car의 메서드 인 present를 사용하는데 서로 연결이 되어있지 않아서 undefined 

 

 

 

 

 

 

 

 

 

 

 

 

 

부모와 자식 Prototype 객체 연결 

Model 의 프로토타입 객체의 __proto__ Car의 프로토타입 객체를 가리키게 하면 된다

 

비표준 방식 : Model.prototype.__proto__ = Car.prototype 

 *  Model.prototype.__proto__가 Car 프로토타입 객체를 가리키게함 

 * __(언더바)로 시작하는 것은 직접호출하지 않는것이 좋다고 하기 때문에 다른방법을 이용하는 것이 좋음 

 

 

Object.create() 방식 

Model.prototype.show = Object.create(Car.prototype)

__proto__가 Car프로토타입 객체를 가리키는 새로운 Model 프로퍼타입객체를 생성한다.

 

이 만들어진  새로운 객체의 __proto__ 는  Car프로토타입객체를 가리키기 떄문에 

present() 를 사용할 수 있게 됩니다.

 

 

 

 

 

 

 

부모(Car) 속성 을 자식(Model)에서 사용 

Car.call (this, brand)

Model's prototype에 __proto__ 속성이 실수로 빠졌습니다.

 

 

Model.show 함수는 결국 this.present() 에서 Car 의 속성을 사용하기 때문에 

Car의 요소들을 가져와서 사용해야함  -> Car 함수를 실행

 

Car.call (this, brand)

Car의 this를 Model 로 만든 객체로 바꿔서 실행 시킴으로써  Car의 요소를 Model에서 사용함

 ( * Car의 this는  Car안에서의 this이기 때문에 Model에서 만들어질 mycar이라는 객체로 바꿔서 실행)

 

 

 

 

 

 

 

 

이렇게 직접 prototype을 이용해 상속관계를 구현함으로써 prototype 과 __ptoro__의 기능을 눈으로 확인햇다.

하지만 이렇게 이해는 했지만 말로 설명하기는 또 어려워 prototype의 의미와 그 장점을 한마디로 정리해 보았다.

 

 

---

 

 

 

 

 

Prototype

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

 

사용하는 이유

Constructor function (생성자함수)가만든 모든 객체는 prototype을 통해 선언된 속성과 메서드를 공유함

코드 재사용 -> 메모리 효율 높아짐 

 

 

 

프로토타입에 대한 나만의 정의를 하며 이번글은 마무리!