TIL 1.17- js ES6 this

this의 뜻

 

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

 

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

일단 this라는 키워드를 콘솔창에 출력해보도록 합시다. 

 console.log(this)

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

 

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

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

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

이것이 this의 첫째 뜻입니다. 그냥 window입니다. 

 

widow : 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체

님들이 쓰는 자바스크립트 함수들 있죠?

document.getElementById(), alert(), console.log()

이런 함수들을 보관하는 보관소입니다. 보관소는 특별한건 아니고 그냥 큰 {오브젝트}일 뿐입니다.  

 

또한 여러분이 전역변수를 만들었을 때도 이 값을 보관해줍니다. 

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

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

함수도 마찬가지고요.

아무튼 그냥 보관소입니다. 끝!

 

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

 

---

1-2. this는 메소드를 가지고 있는 오브젝트를 뜻합니다. 쉽게 외우고싶다면 this는 '메소드의 주인님'을 지칭합니다.

 

그럼 밑의 예제의 this는 무슨 값이 출력될까요?

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

==> 별거없고 오브젝트의 메소드안에서 썼을 때 this는 메소드를 담고있는 주인님을 뜻하기 때문에

함수()를 담고있는 주인님인 오브젝트2.data 라는게 위의 this랑 동일한 뜻입니다. 

 

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

자바스크립트에서 오브젝트를 비슷한걸 여러개 만들고 싶을 경우

오브젝트를 복사하는게 아니라 constructor라는걸 만들어서 사용합니다.

쉽게 말하면 constructor는 오브젝트 복사해서 생성해주는 기계입니다. 

 

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

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

함수 문법을 이용해서 만드신 후, 안에 this. 어쩌구를 추가해주시면 됩니다. 

여기서의 this는 기계로부터 새로 생성될 오브젝트들을 의미합니다. 

 

그럼 this.이름 = 'Kim' 이건 무슨 뜻일까요?

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

라는 뜻 아닐까요? 

맞습니다. 

 

이건 참고로 알아두시면 좋은 기계에서 오브젝트 뽑는 법입니다.

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

이렇게 new 키워드를 이용하면 새로운 오브젝트를 꺼낼 수 있습니다. 

그리고 새로운 오브젝트는 {이름 : 'Kim'} 이라는 값을 가지고 있습니다.  (this 라는 키워드 덕분에요)

 

1-4. eventlistener 안에서 쓰면 this는 e.currentTarget이라는 의미입니다.

 

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

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

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

매우 간단히 설명하면 지금 addEventListener 부착된 HTML 요소를 뜻한다고 보시면 됩니다. 

의심되면 e.currentTarget, this, document.getElementById('버튼') 이거 세개를 각각 출력해보시면 됩니다. 

이게 this의 마지막 뜻입니다. 

 

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

 

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

이벤트리스너 안에서 forEach() 라는 반복문을 사용했습니다. 

forEach() 반복문을 사용할 땐 안에 function(){} 콜백함수를 집어넣어서 사용하게 되어있습니다. 그래서 넣었습니다. 

(* 콜백함수는 그냥 함수 안에 파라미터역할로 들어가는 함수를 뜻합니다. 그게 다임)

 

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

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

오브젝트라는 오브젝트 안에 이름들, 함수라는 자료를 각각 저장했습니다 .

함수라는 자료 안에 forEach 반복문을 돌렸는데,

 

Q .그럼 여기 안에서의 this값을 출력하면 뭐가나올까요? 

 

뭐가 나오냐면

역시 잘 대입을 해보시면 되겠습니다. 

this값을 판단하실 땐 가장 가까이 있는 함수를 살펴보시면 됩니다. 

 

forEach() 안에 있는 함수에 this가 들어있죠?

근데 이 함수는 무슨 뭐 특별한 역할을 하는 함수인가요?

아닙니다. 그냥 일반 함수일 뿐입니다. 

그래서 이것도 window입니다. 

그래서 this값은 function을 만날 때마다 바뀔 수 있기 때문에

내가 원하는 this를 쓰기 힘든 경우가 있습니다. 

그럴 땐 함수를 arrow function으로 바꿔보시길 바랍니다. 

 

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

자바스크립트 ES6 문법 중,

function () {} 대신 쓸 수 있는 () => {} 이라는 arrow function 문법이 있습니다. 

똑같이 함수 만드는 문법입니다. 

이걸 쓰시면 함수 내부의 this값을 새로 바꿔주지 않기 때문에 this를 사용하실 때 유용합니다.