this, bind

이번주 공부 과제

1. this
2. bind
3. apply
4. call
5. es6 arrow function VS es5 function
6. hoisting(let, var, const)

this

• JavaScript 의 this 키워드는 다른 언어들과 비교하여 조금 다르게 동작한다. 대부분의 경우 this의 값은 함수를 호출하는 방법에 의해 결정된다. 선언하는 것에서 결정되는것이 아니라, 호.출 할때 결정된다.

호.출.

하는 방법에 의해 결정된다는 것.

• ES5에서 호출 값이 어떻든 간에 this를 묶어 버리는 함수가 존재하는데, 그게 바로 bind 메소드 이다.(this를 고정시키는 것) 이 부분은 뒤에서 설명함.

  1    let someone = {
  2        name : '김영준',
  3        whoAmI : function(){
  4            console.log(this);
  5        }
  6    };
  7
  8   someone.WhoAmI();

라고 입력을 했을 경우,

    //console 창
    {name:'김영준', whoAmI: f}

이렇게 나올 것이다. 호출하는 방법에 의해 결정된다고 했으니,4번째 줄에서 가리키는 this 는 함수 객체 자기 자신을 가리키는 것이다.

하지만 호출 하는 방법을 달리하면 결과는 어떻게 될까

         //호출하는 방법 다르게 하면
    1    let someone = {
    2        name : '김영준',
    3        whoAmI : function(){
    4            console.log(this);
    5        }
    6    };
    7
    8   someone.WhoAmI();
    9
    10  let myWhoAmI = someone.whoAmI;
    11  myWhoAmI();

이렇게 10번과 11번 줄은 호출하는 방법을 다르게 한것이다. 10번줄을 보면 myWhoAmI 라는 변수에 someone.whoAmI를 호출하는 코드를 넣고 11번줄에서 10번줄을 호출 한다.

위 그림과 같이 한번 거쳐서 와서 호출하는 방법이 달라진것이라 생각하면 된다. 결과는 어떻게 될까 ??

    //console 창
    {name:'김영준', whoAmI: f}
    Window {postMessage: f, blur: f, focus: f, close: f, frames: Window, ...}

라고 나온다..

첫번째 줄에서는 처음에 호출한 someone.WhoAmI();에 대한 값이고

두번째 줄에서는 한번 거쳐서 호출한 myWhoAmI();에 대한 내용이다.

• soneomne 객체 안에 있는 WhoAmI를 직접 호출한 애는 사실 8번째줄의 someone.WhoAmI(); 이놈이다 !! WhoAmI를 꺼낸 놈이 8번째줄 그 자체이다.
• 그렇다면 myWhoAmI();는 왜 다를까? 바로 let myWhoAmI는 윈도우가 낳은 자식이다…

이걸 어떻게 말로 설명할지 감이 잘 오지 않는다 …

myWhoAmI는 자바스크립트 전체에 있고, 그 전체에서 this를 찾으니 당연히 window가 나올 수 밖에 없지 않겠는가 ?? 결국 window가 호출한 셈이다.

• 자바스크립트에서 this의 핵심은

  누가 호출 하였는가(누가 실행했느냐)

그 누가(who) 가 바로 this 이다. 실행한 주체에 따라서 this가 바뀐다는 소리다.

• 이제 위에서 말한 bind 를 설명할 차례인데, bind 는 호출한(실행한) 주체와 무관하게 this를 고정시켜 놓는다는 뜻을 가지고 있다.

       //bind를 붙여보면?
  1    let someone = {
  2        name : '김영준',
  3        whoAmI : function(){
  4            console.log(this);
  5        }
  6    };
  7
  8   someone.WhoAmI();
  9
  10  let myWhoAmI = someone.whoAmI;
  11  myWhoAmI();
  12
  13  let bindedWhoAmI = myWhoAmI.bind(someone);
  14  bindedWhoAmI();

여기서 추가 된 13번째 줄을 살펴보자.

myWhoAmI는 위에서 window를 가리키는 상태였는데, 여기에 .bind(someone)을 붙이면 이제 someone을 바라보겠다는 뜻이 된다. 즉, this의 대상이 someone 이 된다!!

이제 14번째 줄만 실행시켰을때의 상황을 보면

    //console 창
    {name:'김영준', whoAmI: f}

위와 같다.

정리를 해보자

1. JS에서는 선언할때 결정되는 것이 있고, 호출할때 결정 되는 것이 있다. this는 호출할때 결정되는 것. 호출한 객체가 바로 this 이다.

2. 그 this를 호출과 무관하게 묶어줄 수 있는 애가 바로 bind 함수 이다.

• 출처 코드종 유튜브 동영상 보러 가기

1. this

2. bind

3. apply
4. call
5. es6 arrow function VS es5 function
6. hoisting(let, var, const)