[JavaScript] 김영보선생님의 객체지향 이야기

오늘은 강남토즈에서 김영보선생님의 자바스크립트 객체지향 세미나를 듣고 있다. 간단히 요약해 본다 

1. OOP

  - object.method() : 전형적인 OOP 형태 

  - Object is "{}" 즉, JSON 포멧

     object is "new Function"

  - 자바스크립트에서 function은 함수가 아니라 키워드일 뿐이다 

    ex) function sales() {}  -->  { "sales" : function(){} } 으로 대치가능하다

  - 수행 순서

     + 소스

       function A() {

   function B() {}

       } 

     + A() 호출하면 A안의 내용만 { "A" : function(){} } 만 만든다 { "B": function(){} } 은 안만든다.

       즉 수행하는 시점에 해석되고 객체로 적재되어 수행한다 

     + 초기 랜더링에 필요한 부분만 해석되어 수행하면 성능 향상을 할 수 있다

  - oop의 information hiding을 위하여 closure를 사용한다 

2. 메커니즘

  - 메모리 stack 생성 -> Execution Context 저장하고 EC단위로 수행한다 

  - Executable Code type : global code, function code, eval code (eval 코드는 쓰지말라! 5차부터 에러남)

  - Execution Context : Executable code의 실행 단위.  Context : 문맥, 처리단위, 묶음 

  - Stack안에 EC가 들어가는데 가장 먼저 만들어진것이 stack의 바닥부터 위로 채워넣는다. 수행은 위에서 빼서 수행 그때 GC 발생

  - object를 EC에 바인딩 : EC = { VO : { key: value } }   *VO = Variable Object

     모든 EC는 VO와 연동한다 

  - VO 구성요소 : variable, function, function parameter 

    예) 펑션을 만나면 Variable Object를 만든다. { key: value } 이런 형태임

3. VO 메커니즘

  - Global Context, function context로 분리  

  - Global Context : 하나만 존재, Global object도 VO와 연동. 즉, Global object와 VO는 같음

  - 코드가 Hoisting되어서 function -> variable 순으로 호출됨. 즉, function 호출

  - VO의 function context는 AO와 같음 *AO = Activation Object : function 호출시 AO를 만들어 수행하는 것이다 

  - function 실행되면

    + AO 생성 : function & AO 바인딩

    + function에 아규먼트 갯수와 상관이 없으므로 arguments 객체를 만들어줌 (배열아님)

    + 내부 function을 설정, 실행하는 것이 아니다 { key: value } 로 설정

  - scope chain은 scope binding의 추상개념이다

4. Property 탐색 & 클로져

  - property = { key: value } 형태 추상개념

  - Global Context -> Inner Function AO에서 탐색 

  - 클로져 (참조)

    + 내부변수를 참조하는 함수를 리턴함 == function code + [[Scope]]의 조합

    + function 생성 시점에 클로져 설정 

5. This

  - 모든 EC와 this와 관련이 있다

  - function단위로 this 오브젝트를 만든다 (this value)

  - this는 AO에 생긴다. AO는 function이다. 따라서 this는 function안에 존재한다 

  - EC = {VO/AO, value, this: value} 형태  

  - null : 프로세싱 한것. 값이 undefine에서 null이 된것이다 

    undefine : 프로세싱 안한것

  - this.a 했을 때 a가 undefine이면 this생성이 안된 경우일 것이다 (참조)

6. Prototype 

  - object는 prototype을 갖음 

  - [[function]].prototype.property_name 형식

  - this.property_name 으로 접근가능

  - prototype chain이 된다 : 상속개념 사용가능 -> 사용자제 

  - 렌더링시에 생성되어 수행되게 할려면 new 사용을 자제한다?

  - 사용이유 : prototype을 사용하면 new이후 this로 정의한 것을 접근할 수 있기 때문이다 

  - 객체를 1차레벨로 수평화 하라 -> 오브젝트를 불러서 사용한다 (Node.js의 require와 비슷하겠다) -> 접근성이 용이해 진다 

다음 강좌가 있으면 또 교육을 받아봐야 겠다. 정말 설명을 명확하게 잘 해주신다.

<참조>

  - MSDN 자바스크립트 객체지향 이야기

  - NHN이 말하는 자바스크립트의 클로져 이야기