자바스크립트 ES6 ' this '

개발하면서 은근 자주 찾아볼 수 있는 this 키워드는 뜻이 매우 다양하다.
사용하는 환경에 따라서 4개 이상의 각각 다른 뜻을 가지고 있는데
이번 기회에 총정리 해보려 한다.

1-1. 그냥 쓰거나 함수 안에서 쓰면 this는 window를 뜻합니다.

*window = 기본 함수 들의 수납공간.

window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체
보관소는 특별한건 아니고 그냥 큰 {오브젝트}일 뿐이라고 생각하자.

그냥 HTML 파일 아무거나 하나 만들고 중간에 <script> 태그 열어서

일단 this라는 키워드를 콘솔창에 출력해보면

 console.log(this)
/// 출력값 = window {}

*전역변수 : 코드 내 모든 곳에서 참조해서 쓸 수 있는 범용적인, 범위가 넓은 변수. 
그냥 script태그 내에 쌩으로 var 변수 하나 만들면 그건 자연스레 전역변수가 된다

1-2. strict mode일 때 함수 안에서 쓰면 this는 undefined 로 나온다.

<script>
  'use strict';

  function 간지나는함수(){
    console.log(this)
    //출력값은 undefined
  }
  간지나는함수();
  
</script>

'use strict'라는 키워드를 페이지 최상단에 추가하면 strict 모드로 코드를 작성가능하다.
strict mode에선 var 키워드 없이 변수를 선언하거나,
변수를 arguments라는 이상한 키워드로 선언하거나 그런 실수를 방지해준다.
strict mode에선 this 키워드를 일반함수 안에서 불렀을 때 undefined라는 값으로 강제로 지정해줍니다.

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

var 오브젝트1 = {
  data : 'Kim',
  간지함수 : function(){ console.log(this) } 
}

오브젝트1.간지함수();

콘솔창에 { data : 'Kim', 간지함수 : f } 이 출력된다.
방금 만든 오브젝트1 이다.
그래서 메소드안에서 this를 쓰시면 this는 메소드를 가지고 있는 오브젝트를 뜻한다.

var 오브젝트2 = {
  data : {
    간지함수 : function(){ console.log(this) }
  }
}
오브젝트2.data.간지함수();

/// 오브젝트2.data 가 출력된다

1번, 즉 "일반 함수 내에서 썼을 때 this는 window입니다" 라는 정의는 굳이 외울 필요가 없다
왜냐면 2번 뜻을 잘 배웠다면 1번도 자연스레 유추가 가능하다 window 자체가 객체이기 때문이다.

그래서 중점은 결국

this는 오브젝트 내의 메소드(함수)에서 사용했을 때 메소드의 주인님 오브젝트를 출력해준다~