this를 이해하기 위해서

날짜 : 2018. 02. 01.(목)

this를 이해하기 위해서

들어가기에 앞서

이 포스트는 하단에 있는 링크의 글들을 읽고 정리한 글 입니다. 제 실력이 부족하여 도움이 못 될 경우에는 아래의 링크를 참고해 주시기 바랍니다.

본문

이글을 작성하게 된 동기

1. 이벤트 처리시 this를 사용하게 되면 제대로 실행이 되지 않는다.
2. bind를 사용해서 처리해야 한다는 것을 알고만 있고 기술부채로 남겨 두었다. (아마 jQuery를 사용했다면 더 빨리 찾아보았을 것 같다.)
3. 그래서 아래의 사전지식을 수정 및 보충을 할려고 한다.

사전지식 : this의 내용은 execution context(실행컨텍스트)에 따라 달라진다. 그리고 개발자가 제어를 하기 위해서 나온 것이 Function.prototype.call, apply, bind(ES5) 이다.

새로나오는 용어

1. execution context(실행컨텍스트) : ECMAscript에서 실행영역을 정의하기 위해 도입한 추상적인 내용.
2. execution context stack : 호출된 executable code의 모음.
3. global code : 프로그램 실행시 선언
4. function code : 함수를 만나게 되면 선언
5. Eval code : javascript 내장함수로 스크립트 동적 실행
6. executable code : GC, FC, Eval Code
7. variable object : function code 진입시 초기화 작업의 결과물, 해당 execution context의 각종 변수 정보를 저장.
8. active context execution : 현재 수행중인 execution context
9. reference type : ECMAscript의 추상적인 내용, 식별자 정보를 다룬다.

개념

0. this가 어려운 이유

   • JAVA의 self와 같다고 생각한다.
   • 생성자를 만들때에만 필요하다고 생각한다.
   • 위의 이유로 현재 this값이 무엇인지 추측 할 수 없다.

1. execution context(실행컨텍스트)는 무엇인가?

   • 현재 실행중인 코드를 구분하기 위해 나온 추상적인 개념이다. 그렇다 보니 구체적인 내용은 엔진이 구현하기에 따라 달라진다.
   • 자바 스크립트가 실행이 되면 처음에 global code가 실행된다. 그렇게 되면 현재의 execution context는 global code인 것이다.
   • 코드 진행중 함수(function code)를 호출하게 되면 execution context stack에 해당 function context의 정보가 쌓인다. 그리고 execution context는 호출된 function context로 바뀌게 된다.

2. 이것이 this와 무슨 연관이 있는가?

   • 1번의 global code, function code, Eval code 실행되기 위한 사전 작업이 this와 연관이 있다. (scope-chain, variable object, this)
   • 사전작업1 variable object 생성 수행
     • active execution context별 (함수별) 변수선언, 함수선언, 파라메터선언을 수행 (각 선언별 세부사항은 this와 연관이 적어서 생략)
   • 사전작업2 scope chain 생성 수행
     • 현재 active execution context까지의 execution context stack array
   • 사전작업3 this 생성
     • this값은 사전 작업시 생성되는 variable object의 property 이다.
     • 초기화 중(함수 호출될 때) 값이 결정되며 active execution context 일때는 변화가 없다.

3. reference type을 이용하여 this값 조금더 이해해 보기

   • reference type은 ECMAscript의 추사적인 내용이다.
   • reference type은 변수 이름, 함수 이름, 파라메터 이름, 프로퍼티 이름에만 있을수 있다.
   • 구성요소
     • base : 당시 이름 이 속해 있는 객체
     • propertyName : 해당 이름
   • this === reference.base
   • reference.base === null 인경우 암묵적으로 window 형변환

4. 간단한 유형 this값

   • 객체 이름을 붙여서 함수 호출을 하는 경우 : this === 객체
   • 객체 이름을 안 붙여서 함수 호출을 하는 경우 : this === null === window
   • new키워드 사용하는 경우 : this === 선언하는 변수명
   • 임의로 지정하는 경우 : call, apply, bind 함수의 target argument

var foo = {
  bar: function () {
    alert(this);
  }
};
 
foo.bar(); // this === foo

var boo = foo.bar;
boo(); // this === null === window

var coo = new boo(); //this === coo

5. 실제로 이렇게 사용 하는 경우는 드물다;;;
   • 순수 자바스크립트로 MVC를 구현하지 않는 이상 위의 경우만 생기지 않는다.
   • callback 값으로 함수를 넘겨줄때 해당 문제가 발생을 하는데, 그것은 다음편에 알아보겠다. (아래 이상한 모임 블로그에 해당 정보 존재)

참고한 사이트

1. poiema 블로그 - this편
2. huns 블로그 - this
3. huns 블로그 - variable object
4. huns 블로그 - execution context
5. davidshariff 블로그
6. Gaurav Pandvia 기업블로그
7. 이상한모임 블로그