[JavaScript ES6] this 바인딩의 모든 것(Arrow Function, 메소드, strict mode...)

📝 이번 글에선 JavaScript ES6 문법을 공부하며 배운 여러 경우의 this 바인딩에 대해 정리해보려고 합니다!

---

📌 this 바인딩의 핵심!

: this의 값이 무엇인지 파악하려면 함수가 쓰인 위치가 어디인지만 파악하면 된다

즉, 함수가 쓰인 위치에 따라서 내부의 this값이 변한다!

JS의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다. 즉, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

---

📌 1. 그냥 쓰거나 일반함수 안에서 쓰면: {window}

/* 그냥 쓴 경우 */
console.log(this); // {window} 출력

/* 일반함수 안에서 쓴 경우 */
function 함수(){
  console.log(this);
}
함수(); // {window}

{window} ?

: window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체(object)이다.

---

📌 2. strict mode에선: undefined

'use strict';

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

strict mode에선 this를 일반함수에서 불렀을 때 undefined라는 값으로 강제 지정해줌

---

📌 3. 메소드 안에선: 메소드를 가지고 있는 object

var 오브젝트 = {
  data : {
    함수 : function(){
      console.log(this); // {함수: f} 출력 =오브젝트.data를 뜻함
    }
  }
}

오브젝트.data.함수();

---

📌 4. Arrow Function 안에선: 상위 요소의 this 값

var 오브젝트 = {
  data : {
    함수 : () => {
      console.log(this); // {window} 출력 
    }
  }
}

오브젝트.data.함수();

Arrow Function 안에선, data 내부의 this를 출력하여 {window}가 출력됨

Arrow Function 안에서의 this ?

: Arrow Function 안에서는 this 값을 새로 만들지 않고, 함수 밖에 있던(상위요소의) this 값을 그대로 가져다 쓴다.

" 외부의 this 값 그대로 재사용 가능 "

---

📌 5. 이벤트리스너 안에선: e.currentTarget

document.querySelecter('#btn').addEventListener('click', function(){
  console.log(this); // id=btn 태그 출력
}

: 이벤트리스너 안에서의 this는 e.currentTarget과 같은 의미이다. 따라서 지금 이벤트리스너가 달린 곳을 가리킨다.

만약 이벤트리스너에 Arrow Function을 사용한다면?

document.querySelecter('#btn').addEventListener('click', () => {
  console.log(this); // {window} 출력
}

: 상위요소의 this 값인 window를 출력한다.

---

📚 Reference

• 코딩애플 강의
• https://poiemaweb.com/js-this