this

 

   

  const obj = {

     name: "daegon",

     showName() {

       console.log(this);

     },

   };

   //출력 obj = { name: 'daegon', sayname: [Function: sayname] }

   //this는 obj를 가리킴

   obj.showName();

   

   const showN = obj.showName;

   //여기서는 obj의 this가 Window를 가리킴

   showN();

 

 

 

 

 

콘솔창 확인해보면 

 

같은 함수를 호출했는데 값이 다르게 나온다.. 왜일까?

 

 

 

중요!! this는 보통 함수가 호출하는 방법에 따라 달라진다고 합니다.

 

  showN();  호출시 window를 가르키며  

  obj를 붙여서 obj.showName() 을 호출시에 this는 obj를 나타냅니다. 

 

 

 

 

showName()을 화살표 함수로 바꿔보면 또 달라집니다.. 어렵다...

화살표 함수는 부모 함수의 this를 가져옵니다.

showName()의 부모 함수?는 (선언 스코프를 보면) anonymos !! 고로 window?를 나타내나 봅니다.

 

  const obj = {

    name: "daegon",

    showName: () => {

      console.log(this);

    },

  };

  //this는 Window를 가리킴

  obj.showName();

 

  const showN = obj.showName;

  //여기서도 obj의 this가 Window를 가리킴

  showN();

 

 

 

 

화살표 함수를 좀 더 응용해 보면

 

화살표 함수는 부모 함수의 this를 가져오기 때문에.. 

showName()의 부모함수는 anonymos 그래서 this = window

inner()함수의 부모함수는 showName()이기때문에 this = window

 

  const obj = {

    name: "daegon",

    showName: () => {

      console.log(this);

      const inner = () => {

        console.log(this);

      };

      inner();

    },

  };

  obj.showName();

 

 

 

showName()의 this는 obj를 가르키고

inner()의 this는 부모 함수의 this를 가져오기 때문에 obj를 가르킴

 

  const obj = {

    name: "daegon",

    showName() {

      console.log(this.name);

      const inner = () => {

        console.log(this.name);

      };

      inner();

    },

  };

 

  obj.showName();

 

 

-수정중-