this Keyword

🤔 this keyword는 어디에 쓰이냐?에 따라서 뜻하는 의미가 달라진다. 확인해보자!

 

1️⃣ 일반함수

일반(전역)함수에서 쓰면 this는 window를 뜻한다.

// 눈에 보이지 않지만 window라는 전역객체가 감싸고 있다. 
window: {
    function solution() {
    console.log(this);
    } 
}

// window
solution()

 

2️⃣ Strict mode

Strict mode에서는 일반함수 안에서 this keyword를 불렀을 때 undefined라는 값으로 지정해준다. 

'use strict';

function solution(){
  // undefined
   console.log(this)
}
 solution()

 

 

3️⃣ Object내 함수 안에서 this

호출한 자기 자신을 포함한 그 함수를 가지고 있는 Object를 나타낸다. 

let object = {
  data : "Kim",
  함수() {
    console.log(this);
  }
}

// object = { data: "kim" ...}
object.함수();

 

4️⃣ Arrow function

상위 요소에 있는 this를 물려 받아서 쓰겠다는 뜻이다. 

const object = {
  name: "hobin",
  speak() {return `My name is ${this.name}`}
}

// My name is hobin 출력
object.speak();

 

 

5️⃣ Class

클래스 안에서 쓰면 새로 생성되는 object를 뜻한다. 

let object = {}

function machine() {
  // 새로 생성되는 object === instance
  this.이름 = "kim"
}

// machine {이름: "kim"}
let object = new machine();

 

 

6️⃣ 이벤트 리스너

지금 이벤트가 동작하는 곳을 의미한다.

document.getElementById("버튼").addEventListener("click", 
function(e) {
  // 여기서 this === e.currentTarget
  console.log(this)
  // 지금 이벤트가 동작하는 곳
  console.log(e.currentTarget);
})