[JS] This / TIL # 13

velg·2021년 8월 14일

JavaScript TIL

JavaScript

목록 보기

8/12

this가 무엇인지, 그리고 상황에 따라 무엇을 가르키는지 알아보자

this

this는 앞선 글에서도 종종 등장한 키워드이지만 한번 더 다루는 이유는 자바 스크립트에서 this가 상황에 따라 다르게 동작하기 때문이다

단독으로 호출

단독으로 호출 시 global object를 가르킨다

브라우져에서 호출 시 window
nodeJs에서 호출 시 global

const test = this; // Window

함수에서 호출

함수에서 호출 시 global object를 가르킨다

function func() {
  const test = this;
  console.log(test); // Window
}

메소드 내부에서 호출

메소드 내부에서 호출 시 해당 객체를 가르킨다

const info = {
  name: "정찬영",
  age: 28,
  sayHello: function () {
    console.log(`hello ${this.name}`);
  },
};
info.sayHello(); // "hello 정찬영"

이벤트 핸들러 내부에서 호출

이벤트 핸들러 내부에서 호출 시 해당 HTML 요소를 가르킨다

const button = document.querySelector("button");

button.addEventListener("click", function () {
  console.log(this); // button
});

생성자 내부에서 호출

생성자 내부에서 호출 시 해당 생성자를 가르킨다

function getName(name) {
  this.name = name;
  console.log(this);
}

const myName = new getName("JCY"); // getName

// new가 없을 경우
const yourName = getName("SUG"); // Window

화살표 함수에서 호출

화살표 함수는 전역 컨텍스트에서 실행되더라도 this를 새로 정의하지 않고 바로 바깥 함수나 클래스의 this를 쓴다

const getName = function (name) {
  this.name = name;
  console.log(this); // getName
  this.sayHello = function () {
    console.log(this); // getName

    setTimeout(() => {
      console.log(this); // getName
    });
 /* setTimeout(function () {
      console.log(this); // Window
    });*/
  };
};
const myName = new getName("jcy");
myName.sayHello();

위코드에서 setTimeout의 콜백 함수 안 this는 화살표 함수 일 경우 바깥함수인 'getName'을 일반 함수일 경우 Window를 가르킨다

명시적 바인딩 후 호출

명시적 바인딩은 짝을 지어 주는 것으로 call, apply를 통해 사용한다

const getName = function () {
  console.log(this);
};
const names = {
  one: "JCY",
  two: "SUK",
};

getName.apply(names); // names object

참고블로그 😌 https://nykim.work/71

마치며... 끄적끄적

이번 글은 정리하면서도 모르는 부분이 꽤나 많았다
정리된 글들을 보면서도 이해를 못하는 나 자신을 보고 있으면 살짝 의기소침해지면서도 조금씩 깨달아갈 때 개발자로서 성장하는 느낌이 들어 '오히려 좋아' 하기도 했다

화살표 함수 내부 호출에서 전역 컨텍스트에 관련된 이야기가 나와서 구글링 해봤지만 아직 잘 모르겠다.. 찾아보니 실행 컨텍스트와 관련된 내용이 같이 나오던데 다음에 자세히 알아보며 글을 작성해야겠다

명시적 바인딩 부분은 참고한 블로그 작성자분의 글을 봐도 이해가 잘 안되었다
'실제로는 이런식으로 사용 할 수 있다'라는 예시를 코드로 적어주셨는데 겪어보지않은 상황이라서 그런지 이해도 잘 안되고 필요성도 잘 느끼지 못했다
그래서! 일단은 call, apply라는 함수가 있고 this를 바인딩 해주는구나~ 라고 알고 있는 선에서 넘어가려고한다( 하기 싫어서는 아님.. ㅋㅋ! )
공부하면서 항상 느끼지만 실제로 사용하면서 눈으로, 손으로 익히지 않으면 3일내로 다 까먹는다
그래서 이 부분도 직접 사용하지 않는다면 이번 주 내로 까먹을게 분명하기에..!
다음에 실제로 사용하는 날이 오고 직접적으로 필요성을 느끼면 그 때 다시 공부 하려한다