this 키워드

3~4가지의 뜻을 가지고 있음

🔎 사전 개념 정리

Javascript를 사용하는 이유

HTML을 변경하기 위해 사용

오브젝트 안에 함수 넣는 신 문법

var 오브젝트 = {
    data: {
      함수() { // 기존의 function 키워드 생략 가능 
        console.log(this);
      },
    },
 };

⭐ 신 문법 Arrow Function

• () => {} 형태로 선언
• 내부의 this값을 변화시키지 않음. 즉, 외부의 this 값을 그대로 재사용 함.

콜백함수

함수 안에 들어가는 함수

Array & Object

자료를 한 번에 여러개 저장하는 용도로 사용

---

1) Window

• 그냥 쓰거나 일반 함수 안에서 쓰면 window를 뜻함
• window는 기본 함수들 수납 공간
• 근데 strict mode에서 일반 함수 내에서 쓰면 undefined를 뜻함

console.log(this);

function 함수() {
  console.log(this); // strict mode에서는 얘가 undefined가 됨
}

함수();

2) Object

• 오브젝트 내 함수 안에서 쓰면 그 함수를 담고있는 오브젝트를 뜻함

console.log(this);

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

오브젝트.함수();
  
 // 출력: {data: 'Kim', 함수: ƒ}

• 신 문법 Arrow Function 안에서 쓰면 this 값을 함수 밖에 있던 값 그대로 씀

// 기존 문법: function() {}
 var 오브젝트 = {
    data: {
      함수: function () {
        console.log(this);
      },
    },
  };
오브젝트.data.함수();
// 출력: {함수: ƒ}

// 신 문법: () => {}
var 오브젝트 = {
    data: {
      함수: () => {
        console.log(this);
      },
    },
  };
오브젝트.data.함수();
// 출력: Window

✨ 함수나 변수를 전역공간에서 만들면 {window}에 보관한다

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

⇒ 그래서 this를 그냥 쓰거나 일반 함수 안에서 쓰면 window를 뜻한다는 말이나 오브젝트 내 함수안에서 쓰면 그 함수를 담고있는 오브젝트를 뜻한다는 말이나 똑같은 것임!!

➡️ 결국 1)과 2)에서 this의 뜻은 하나임.
✨ this를 담고 있는 object

3) Instance(새로 생성되는 Object)

• Constructor(오브젝트 생성 기계) 안에서 사용하면 instance(새로 생성되는 오브젝트)를 뜻함

function 기계() {
    this.이름 = "Kim";
 }
 
 // 기계에서 오브젝트 생산
 var 오브젝트 = new 기계();
 
 // 오브젝트 -> 기계 {이름: 'Kim'}

4) e.currentTarget(현재 이벤트가 일어나고 있는 곳)

• 이벤트리스너 안에서 사용되면 e.currentTarget을 뜻함

<button id="버튼">버튼</button>

<script>
  document.getElementById("버튼").addEventListener("click", function (e) {
    console.log(this);
    console.log(e.currentTarget);
  });
</script>

// 출력: <button id="버튼">버튼</button>

---

🗂️ 총 정리

케이스	this의 뜻
그냥 쓴 경우, 함수 안에서 쓴 경우, 오브젝트 안의 함수 안에서 쓴 경우	this를 감싸고 있는 오브젝트
constructor안에서 쓴 경우	instance
이벤트 리스너 안에서 쓴 경우	e.currentTarget

✨ 판단 Tip
1. 구 문법인지 신 문법인지 판단
2-1. 구 문법인 경우 : this가 들어있는 함수를 감싸고 있는게 뭔지 보고 판단
2-2. 신 문법인 경우 : this가 들어있는 함수를 감싸고 있는 것 두 겹 바깥에 this를 적고 얘가 뭘 지 2-1 방법으로 판단

Case 1)

document.getElementById("버튼").addEventListener("click", function (e) {
    var 어레이 = [1, 2, 3];
    // 콜백 함수
    어레이.forEach(function (a) {
      console.log(this);
  });
});

여기서 this는 나를 감싸고 있는 window다.

Case 2) 오브젝트 내의 콜백함수

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

 오브젝트.함수();

forEach 안의 function만 보면 var 오브젝트가 얘를 직접적으로 감싸고 있지 않기 때문에 얘는 근본없는 일반함수다. 따라서 Window만 세 번 출력된다.

Case 3) Arrow Function 안에서의 this

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

오브젝트.함수();

외부의 this 값을 그대로 물려 받아서 오브젝트가 세 번 출력된다.