this?

요약

1. Object안, 함수의 this 는
   함수를 가지고 있는 object를 가리킨다.
2. method로서 호출을 한 '주인장'이 누구인지도 염두해주자.
3. Array 안에서 함수의 this도 Array를 가리킨다. -(당연함 ㅇ.ㅇ Array도 객체니..)

---

this에 대해 알아보자

1. 일반 함수 || 그냥 this를 쓰면 ...

console.log(this)// winodw 객체
function 함수(){ console.log(this) }// window객체
</script>

1-1. stric mode하고 일반 함수 내에서 쓰면...

'use strict';

function 함수(){ console.log(this) } // undefined

2. Object 내 함수안에서 쓰면...

object 자료형 내에 함수들이 있을 수 있는데 거기서 this값은 '주인님' 을 뜻합니다.

var object = {
  data :'kim',
  함수 : function() {
    console.log(this) // {data: 'kim', 함수: ƒ} <-object가 나온다.
    console.log(this.data) // 'kim'
  }
}

즉 다시 말해서 this = object이다. 😁

2-1. Object안, Object의 메소드에서 쓰면...

 var 오브젝트 = {
   
   data :  {
     함수 :  function(){
       console.log(this) // {함수 : f} <- data가 나온다.
     }
   }
 }

이번 this의 주인은 오브젝트가 아닌

'data' 가this의 주인장이다.

2-2. arrow function을 오브젝트 안에서 쓰면..

var 오브젝트 = {
  data : {
    함수 : ()=> {
      console.log(this) // {window} 객체가 뜬다.
    }
  }
}

여기서 잠깐

Arrow Function의 특징 : 내부의 this 값을 변화시키지 않음 => 외부 this 값 그대로 재사용가능

마무리

근데 놀라운 사실은 그냥 this라는 뜻은 2번만 알면 됨

script안에 무언가 쓸 때

{} <- 이게 안보이고, 전체를 다 감싸고 있다고 생각하라

console.log(this) // {window}

윈도우 객체가 나옴

아까 2번에서 this는 함수를 포함한 오브젝트 (=쥔님)을 나타낸다고 하지 않음?

그러므로 function 함수 ( ) { console.log(this)} -> {window}라는 것은

window.함수 ( ) { } 이렇게도 쓸 수 있는 것임

따라서

window . 함수 ( ) { } = 함수 ( ) { }

라고 생각해도 무방함...