Javascript - 상속(inheritance)와 prototype(2)

***이후부터는 6월 17일에 추가된 내용

 

이전 상속에 내용의 연장선이라고 볼 수 있는 prototype이다. prototype은 javascipt에서 가지는 특수한 속성(property) 이다. prototype의 뜻은 '원형'이라고 하는데, javascript에서는 객체원형이라고 한다.(from 생활코딩)

 

  *함수를 위에서 부터 Ultra - Super - Sub라고 정했고, 변수 o에 Sub 생성자를 할당했다.

  *Sub라는 함수에는 따로 ultraProp라는 객체를 만들지 않았는데, console을 확인 했을 때, true라는 것을 확인 할 수 있다.

  *결과값이 true 값이 나왔다면, o.ultaProp라는 객체의 값이 존재 한다는 것이다.

  *이렇게 되는 이유는 Sub는 Super를 상속 받았고, Super는 Ultra를 상속 받았다. prototype으로 특수한 속성으로 상속을 받았기 때문에 가능 하다.

  *이와같이 prototypr으로 연결된 것을 보고 prototype chain 이라고 한다.

  *o.ultraProp가 호출 되었을 때, javascript는 기본적으로 객체 o에 ultraProp를 찾는다. 찾았을 때 ultraProp 속성이 없다면, prototype 속성을 찾는다. prototype 속성을 가지고 있다면, 상속을 해준 상위 객체에서 ultraProp를 찾고 없다면 이와같은 일을 반복하고, 최상위 객체에도 없으면 undefined를 반환 하고, 있다면 그 값을 반환 한다.

from 생활코딩

***

  *앞서 상속을 할 때, constructor를 명시 해야하고, call을 통해서 this를 가져와야 하는 번거로움이 있다(this를 사용안하면 상관없다.)

  *이것을 ES6 버전에서는 Class라는 키워드를 통해 쉽게 해결할 수 있다.(이전 내용은 ES6 이전 버전이다)

  *하기 코드를 보면 Class 선언 통해 쉽게 생성자를 만들수 있고, 여기에 Es6이전 처럼 constructor를 명시해주는 것과 this를 호출하는 코드도 필요 없다.

  *Class를 사용할 때, 주의할 점은 Hoisting이 일어나지 않는다. 함수는 코드 내에서 어디에 선언하든 코드를 해석할 때, 제일 위로 가져와 해석 하지만, Class는 Hoisting이 안된다.

 

Class를 이용한 상속

 - Class를 사용하여 상속 받으려면 'Class 생성자 명칭 extends 상속생성자명칭' 구조로 가져와야 한다.

 - 상속받은 Class에 constructor 메소드가 있다면 this를 사용하기 위해서는 super()라는 코드를 통해서 상속 객체에서 받아 와야한다.

  *super를 선언 함으로써 this를 사용할 수 있다.

  *super를 선언 하기전에 this를 사용하면 Error 메세지가 발생한다.

 

 

#javascript#생활코딩#prototype#prototypechain