Front-End/

Section 5:Object-Oriented Javascript and Prototypal Inheritance

taehyun_kim 2017. 4. 25. 14:12

Prototype


 classical vs prototypal inheritance 

 classical 상속이 내가 알고 있는 java에서 사용하는 것이다. 하지만 prototypal 상속에 비해 복잡하다고 하는데 비교를 해보자.


 Prototype이란?


예제를 먼저 살펴보자. console에 무엇이 나올까?

Default ? John ? 무엇이 나올까?   답을 살펴보기 전에  john object가 메모리에 어떻게 할당되어 있는지 살펴보자

  john - property( firstName, lastName )   

   ->  person - property ( firstName, lastName, getFullName() )   

이런 식으로 할당이 되어 있다. ->는 prototype chain을 나타낸다.

firstName을 찾을 때 먼저 john에서 property를 찾은 후 없을 시 javascript engine이 prototype chain을 따라 person으로 내려가서 검색한다.

결국 답은 John Doe이다.


두번째 예제를 살펴보자.

각자 .__proto__를 출력하면 무엇이 나올까?

1) a는 object를 정의한 것이다. a.__proto__ 를 console에 찍으면 prototype chain의 마지막에 있는 기본 object가 출력된다. a.__proto__. 을 하면 기본 object에서 사용하는 function 목록들이 나온다.

2) b는 함수를 정의한 것이다. b.__proto__ 를 console에 찍으면 function empty(){}가 나오고 b.__proto__.__proto__를 하면 기본 object가 출력된다. b.__proto__의 함수목록을 보면 argument등 함수에서 사용되는 function 들이 나온다.

3) c는 배열을 정의한 것이다. c.__proto__를 console에 찍으면 []가 나오고 c.__proto__.__proto__를 하면 기본 object가 출력된다. c.__proto__의 함수목록을 보면 배열관련된 function ( push 등 ) 들이 나온다.


Reflection


 

Reflection에 대한 정의부터 살펴보자.

객체를 통해 클래스의 정보를 분석하는 기법을 말한다. 즉 컴파일 타임에 결정(개발자가 어떤 프로퍼티인지 알고 코딩)하는 것이 아니라 런타임에서 클래스를 통해 정보를 분석하는 것이다.

(예시)

john에 있는 property들(firstname, function)만 출력이 된다.


underscore.js 

 _.extend(...) 라는 함수가 있다.

코드를 살펴보자.

주석에 나와있드시 object의 property들을 새로 할당해주는 것이다.

object가 넘어오면 property들을 배열로 return 해주는 함수다.

keysFunc에 property list를 만들어주는 함수가 할당되어 있고, return은 그 property list들을 object에 할당해주는 함수이다.
(arguments는 자바스크립트 지시어로 말그대로 함수의 파라미터들의 정보를 가지고 있다. )


 왜 사용함?