This

This같은 개념은 글만봐서는 절대 알 수 없는것 같다.

관련 글과 영상을 수차례 보고나서야 대략적으로 알 수 있게 된 this에대해 다뤄보도록 하겠다.

• 자기 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기참조 변수
• 대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정된다.

역시 글로는 모르겠으니 예시를 섞어보겠다.

예시

const person1 ={
  name: "가나다",
  age: 20,
  hello: function(){
    console.log(this)
  }
}


const person2 = {
    name: "마바사",
  age: 30,
  sayHi: function(){
    setTimeOut(function(){
    console.log(this)
    },1000)
  }
}

위 두개의 객체를 생성했다고 하자.

여기서 person1.hello()를 호출하면 어떤 값이 찍힐까?

person1.hello 가 가르키는 this는 자기가 속한 person1이라는 객체를 가르킨다.

person1.hello() => { name: "가나다", age: 20, hello: function(){
console.log(this) } }

hello는 바로 함수이고 이 함수인 hello는 person1에 속해있기 때문에다.

하지만 만약에

let printThis =  person1.hello()
printThis()

를 하면 어떻게 될까?

이때 hello는 printThis에 의해서 불려졌다.
printThis는 어떤 함수나 객체안에 있지 않고 전역 스코프 안에 있다.

그렇기 때문에 이때 this는 window 객체를 가르킨다.

person2.sayHi()는 어떨까?

여기서 sayHi는 setTimeOut이라는 window 메서드이고 이 안에 있는 this는 setTimeOut이 호출했기 때문에

this는 window가 된다.

만약 this가 person2 객체를 가르키게 하고 싶다면?

• setTimeOut을 this로 bind해야한다.

--> setTimeOut을 포함한 함수 sayHi는 person2의 객체이기에 bind된 this는 person2가 된다.

여기서 만약 setTimeOut안 callback 함수가 arrow function 이었으면 this를 bind하지 않아도 person2를 가르킨다.

arrow function

arrow function에서 this는 자신을 감싼 정적함수를 가르킨다.

또한 arrow function은 주의할 점이 있는데 그냥 객체 내의 메서드를 정의할 때 쓰면 안된다.

const person1 ={
  name: "가나다",
  printThis: () => {
    console.log(this)
  }
}

위 예시를 보자

여기서 printThis 메서드의 arrow function을 감싼 정적함수는 person 객체 밖 window이다.

그러므로 printThis의 this는 window가 된다.

이는 객체 뿐 아니라 addEventListener도 같다.

strict 모드에서 this가 전역스코프를 가르키는 경우에는 window객체가 아니라 undefined를 출력한다.

자신을 호출한 방법에따라 this가 가르키는 것이 다르다는 점을 잘 생각해둬야 this를 잘 다룰수 있을 것 같다.

참고
Udemy Advanced Javascript - Asim Hussain