본문 바로가기

Front-End/

Section 5:Object-Oriented Javascript and Prototypal Inheritance

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는 자바스크립트 지시어로 말그대로 함수의 파라미터들의 정보를 가지고 있다. )


 왜 사용함?

'Front-End > ' 카테고리의 다른 글

Shadow DOM  (0) 2017.04.28
문서 스크립팅  (0) 2017.04.27
Section4 : Objects and Functions  (0) 2017.04.24
Section3 : Types and Operators  (0) 2017.04.21
Section2 : Execution contexts and Lexical Environments  (0) 2017.04.11