[Javascript] this가 도대체 뭘까? this가 가리키는 총 4가지

1 그냥 쓰거나 함수 안에서 쓰면 this는 window

 console.log(this)

그러면 this 키워드는 그냥 window {블라블라} 이런 값이 나옵니다. 

 함수 내에서 this라는 값을 불러보면 그냥 window

function 간지나는함수(){
  console.log(this)
}
간지나는함수();

window는 무엇?

document.getElementById(), alert(), console.log() 이런 함수들을 보관하는 보관소

전역변수를 만들었을 때도 이 값을 보관

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

이렇게 변수를 큰 공간에 만드시면 x라는 변수는 window라는 큰 오브젝트안에 자동적으로 생성됩니다. 

함수도 마찬가지

 

※전역변수 : 코드 내 모든 곳에서 참조해서 쓸 수 있는 범용적인, 범위가 넓은 변수

script태그내에서 특정 함수안에 묶여있지 않은 변수를 전역변수

 

strict mode일 때 함수 안에서 쓰면 this는 undefined

<script>
  'use strict';

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

IE 10버전 이상에선 'use strict'라는 키워드를 페이지 최상단에 추가하면 strict mode로 자바스크립트를 작성가능

strict mode에선 this 키워드를 일반함수 안에서 불렀을 때 undefined

 

2. object 자료형 내에 this는 메소드를 가지고있는 object(feat.메소드주인) 

 

object 자료형에 함수같은거 집어넣기 가능

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

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

 

오브젝트에 들어가는 함수들을 전문용어로 메소드 method라고 함. 

 

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

오브젝트1.간지함수(); // { data : 'Kim', 간지함수 : f }



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

 

 메소드안에서 this를 쓰시면 this는 메소드를 가지고 있는 오브젝트를 뜻합니다. this= 메소드 주인

 

<script>

  (1)
  function 간지나는함수(){
    console.log(this)
  }

  (2)
  window.간지나는함수 = function(){ console.log() };
  


//두개의 결과는 window 오브젝트안에 들어가는 동일한결과
  
</script>

간지나는함수()는 전역변수나 전역함수를 관리하기 위한 window라는 오브젝트에 자동으로 추가. 

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

 

오브젝트를 비슷한걸 여러개 만들고 싶을 경우 constructor 사용

constructor: 오브젝트 복사해서 생성기

 

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

이게 기계 만드는 법입니다. 

여기서의 this는 기계로부터 새로 생성될 오브젝트(instance)들을 의미

 

this.이름 = 'Kim' -> "새로생성되는 오브젝트의 이름 key값에 'Kim'이라는 value를 집어넣어주세요"

 

4. eventlistener 안에서 쓰면 this는 e.currentTarget 

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

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

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

 

---

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

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

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

var 오브젝트 = {
  이름들 : ['김', '이', '박'];
  함수 : function(){
        console.log(this) // {이름들:Array(3),함수:f}
      오브젝트.이름들.forEach(function(){
        console.log(this) // 윈도우 근본없는함수이기에
      });
  }
}

오브젝트.함수();

자바스크립트 ES6 문법 중, arrow function 을 쓰게될경우 외부 this그대로 사용가능

var 오브젝트 = {
  이름들 : ['김', '이', '박'];
  함수 : function(){
        console.log(this) // {이름들: Array(3), 함수:f}
      오브젝트.이름들.forEach(() => {
        console.log(this) // {이름들: Array(3), 함수:f} 내부 this값을 변화시키지 않고 외부 this값사용
      });
  }
}

 

 

 

출처: 애플코딩