(JavaScript) 'this' 키워드

자주 볼 수 있는 'this' 키워드

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

<script>태그 열어서 그냥 this라는 키워드를 콘솔창에 출력해보면

console.log(this)

this 키워드는 그냥 window {어쩌구} 이런 값이 나온다.

비슷하게 일반 함수 내에서 this라는 값을 불러보면

function 함수(){
 console.log(this)
}
함수();

똑같이 this라는 값은 window 라고 출력된다.

• window는 우리가 쓰는 document.getElementById(), alert(), console.log() 이런 함수들을 보관하는 보관소이다. 보관소는 특별한건 아니고 그냥 큰 {오브젝트}.
• 전역변수를 만들었을 때도 이 값을 보관해준다.

<script>
  var x = 300;
</script>

이렇게 변수를 큰 공간에 만들면 x라는 변수는 window라는 큰 오브젝트안에 자동적으로 생성된다.
(함수도 마찬가지) 아무튼 그냥 보관소라고 생각하면 된다.

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

IE 10버전 이상에선 'use strict'라는 키워드를 페이지 최상단에 추가하면 strict mode로 자바스크립트를 작성가능하다.
strict mode에선 var 키워드 없이 변수를 선언하거나, 변수를 arguments라는 이상한 키워드로 선언하거나 그런 실수를 방지해준다.

<script>
  'use strict';

  function 함수(){
    console.log(this)
  }
  함수();
  
</script>

strict mode에선 this 키워드를 일반함수 안에서 불렀을 때 undefined라는 값으로 강제로 지정해준다.

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

object 자료형에 함수같은거 집어넣을 수 있다.

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

함수를 꺼내쓰려면,

var 오브젝트1 = {
data : 'Kim',
함수 : function(){ console.log('하이') } 
}
오브젝트1.함수();

이렇게 쓰면, 콘솔창에 '하이'라는 글자가 출력된다.

근데 메소드(함수) 안에서 this를 쓰면 신기한 값이 나오는데,

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

콘솔창에 { data : 'Kim', 함수 : f } 이런값이 출력된다.
이게 방금 만든 오브젝트1이다.

그래서 메소드안에서 this를 쓰면 this는 메소드를 가지고 있는 오브젝트를 뜻한다.

쉽게 외우고싶다면 this는 '메소드의 주인님'을 지칭

• 아래처럼 써본다면

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

오브젝트의 메소드안에서 썼을 때 this는 메소드를 담고있는 주인님을 뜻하기 때문에
함수()를 담고있는 주인님인 오브젝트2.data 라는게 this랑 동일한 뜻!

즉, 아래의 코드(1) 코드(2) 둘다 자바스크립트 입장에서 보면 똑같단 이야기

<script>

  (1)
  function 함수(){
    console.log(this)
  }

  (2)
  window.함수 = function(){ console.log() };
  
</script>

2)문법은 window라는 오브젝트에 함수 자료를 추가하는 문법일 뿐
결론은 전역함수 만들거나 전역변수 만들면 저렇게 window {오브젝트} 안에 담긴다.

3. constructor 안에서 쓰면 constructor로 새로생성되는 오브젝트를 뜻한다.

자바스크립트에서 오브젝트를 비슷한걸 여러개 만들고 싶을 경우 오브젝트를 복사하는게 아니라 constructor라는걸 만들어서 사용한다.
쉽게 말하면 constructor는 오브젝트 복사해서 생성해주는 기계!

function 기계(){
  this.이름 = 'Kim';
}

• 여기서의 this는 '기계로부터 새로 생성될 오브젝트들을 의미'
  그럼 this.이름 = 'Kim' 이것은,
  새로생성되는 오브젝트의 이름 key값에 'Kim'이라는 value를 집어넣어달라는 뜻!!

• 참고로 알아두면 좋은 기계에서 오브젝트 뽑는 법

function 기계(){
  this.이름 = 'Kim'
}
var 오브젝트 = new 기계();

이렇게 new 키워드를 이용하면 새로운 오브젝트를 꺼낼 수 있다.
그리고 새로운 오브젝트는 {이름 : 'Kim'} 이라는 값을 가지고 있다. (this 라는 키워드 덕분에)

4. eventlistener 안에서 쓰면 this는 e.currentTarget이라는 의미

document.getElementById('버튼').addEventListener('click', function(e){
  console.log(this)
});

여기서 this를 소환하면 이것은 바로 e.currentTarget이라는 뜻과 똑같은 의미이다.

e.currentTarget은 지금 이벤트가 동작하는 곳을 뜻함.

4-1. 이벤트리스너 안에서 콜백함수를 쓴다면 this는?

document.getElementById('버튼').addEventListener('click', function(e){
  var 어레이 = [1,2,3];
  어레이.forEach(function(){
    console.log(this)
  });
});

forEach() 반복문을 사용할 땐 안에 function(){} 콜백함수를 집어넣어서 사용하게 되어있다.
(* 콜백함수는 그냥 함수 안에 파라미터역할로 들어가는 함수를 뜻함.)

• 4번뜻에 의하면 eventlistener 안에서 쓴 건 아니고, eventlistener내부는 맞지만 그 안에서 function을 한번 더 만났기 때문에 의미가 변한다.
  this의 1번이나 2번뜻처럼 저렇게 쌩으로 있는 콜백함수는 그냥 일반함수랑 똑같기 때문에 window가 출력된다.

this의 값은 this가 어떤 함수안에 들어있는지만 잘 체크하시면 바로 알 수 있다.

4-2. 오브젝트 안에서 콜백함수를 쓴다면 this는?

var 오브젝트 = {
  이름들 : ['김', '이', '박'];
  함수 : function(){
      오브젝트.이름들.forEach(function(){
        console.log(this)
      });
  }
}

• this값을 판단힐 땐 가장 가까이 있는 함수를 살펴보면 된다.
  forEach() 안에 있는 함수에 this가 들어있다. 근데 이 함수는 무슨 뭐 특별한 역할을 하는 함수도 아니고, 일반 함수이다.
  그래서 이것도 window가 출력된다.

• 그래서 this값은 function을 만날 때마다 바뀔 수 있기 때문에 내가 원하는 this를 쓰기 힘든 경우가 있다. 그럴 땐 함수를 arrow function으로 바꾸면 해결할 수 있다.

var 오브젝트 = {
  이름들 : ['김', '이', '박'];
  함수 : function(){
      오브젝트.이름들.forEach(() => {
        console.log(this)
      });
  }
}

자바스크립트 ES6 문법 중, function () {} 대신 쓸 수 있는 () => {} 이라는 arrow function 이 있다.
똑같이 함수 만드는 문법인데, 이걸 쓰면 함수 내부의 this값을 새로 바꿔주지 않기 때문에 this를 사용힐 때 유용!