Gidhub BE Developer

JavaScript :: This

2018-11-13
goodGid

모든 테스트는 Strict 모드에서 진행되었다.


전역 공간에서 this

  • 브라우저에서 this를 출력하면 window 객체가 나온다.

  • Node.js에서 this를 출력하면 global 객체가 나온다.


함수 내부에서 this

  • 함수 내부에서 this는 기본적으로 전역 객체를 가리킨다.

  • 하지만 바꿀 수 있다.


메소드 내부에서 this

  • 메소드 바로 앞에 있는 부분까지가 this이다.

  • 메소드와 친구인 함수를 생각할 땐 전역 객체(window, global)의 메소드라고 생각하면 된다.

  • 즉 함수()는 전역 객체.함수()의 형태이므로
    함수()는 전역 객체의 메소드라고 생각하면 된다.


내부 함수에서 우회법

  • obj.b()에서의 b()는 obj가 호출한 메소드이기 때문에 obj안에 있는 a값이 출력된다. (= 20)

  • 하지만 c()는 그냥 함수이기 때문에 전역 객체의 a값이 출력된다. (= 10)


  • 그렇다면 c()함수안에서 this를 obj를 가리키게 할 수 없을까?

  • Scope Chain을 통해 우회가 가능하다.

  • b() 메소드에서 this를 self라는 변수에 담고

  • c() 함수안에서 self라는 변수를 사용한다.
    물론 반드시 self라는 변수를 사용하는 것은 아니다.

  • c() 함수안에서 사용된 self 변수는 자신의 Scope안에서 self를 찾게 되고

  • c() 함수안 없기 때문에 Scope Chain에 의해 위로 올라가서 찾게 된다.
    (= b() 메소드에서 선언된 self 변수를 사용한다.)


CallBack에서 this

  • 기본적으로 함수 내부에서와 동일하다.

  • 하지만 call, apply, bind를 통해 this를 바꿀 수 있다.

  • 아래 코드의 결과 값은 모두 동일하다.


  • 공식 문서를 보자.

  • 맨앞에 thisArg는 모두 동일하다.

  • 그리고 thisArg 변수는 개발자가 직접 명시하여 this를 명시한 값으로 인식시키게 된다.


  • call과 bind는 두번째 인자부터 무한대로 입력이 가능하다.

  • apply는 두번째 인자로 배열이 온다.

  • call과 apply의 차이는
    두번째 부터 무한대로 입력으로 받느냐
    하나의 배열로 받느냐 이다.


  • call과 apply는 즉시 호출이다.

  • 반면 bind는 새로운 함수를 생성한다.

  • 그렇기 때문에 다음과 같이 변수에 담아 사용한다.


  • 다른 예를 보면

  • b: function(cb)에서의 cb는 callback이 된다.

  • 그리고 그안에서 cb()를 호출하면 다음 함수가 호출이 된다.

var callback = function(){
    console.dir(this)
}
  • 이때 단순히 cb()를 호출했기 때문에 그 자체는 함수가 되고

  • 함수안에서의 this는 기본적으로 전역 객체를 가리키기 때문에 window가 출력된다.


  • 마찬가지로 cb는 callback이 된다.

  • 하지만 cb.call(this)에서의 this는

  • obj.b(callback)형태로 b()함수를 호출했기 때문에 this는 obj가 된다.


  • 또 다른 예를 보자.

  • bind 함수를 사용하여 this의 값을 명시적으로 지정해줬다.

생성자 함수에서 this


Recommend

Index