📘 this 란?

• 내가 말할때의 '나'와 친구가 자기얘기를 할때의 '나'는 표현은 같지만 나타내는게 서로 다르다. 이와 비슷하게 자바스크립트에서 표현은 같지만 상황에 따라 값이 달라지는 값이다.

• this 는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this 를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

🤷 값이 어떻게 결정되나?

• this는 해당 값이 들어있는 함수가 어떻게 실행되냐에 따라 값이 결정된다. 즉 해당 함수를 실행하는 부분을 찾아야 this 값의 판단이 가능하다.

• this 가 가르키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.

  바인딩이란 식별자와 값을 연결하는 과정을 의미한다. this 바인딩은 this와 this가 가리킬 객체를 바인딩하는 것이다.

함수가 실행되는 방식은 어떻게 있나?

1. 일반 함수 호출

Regular function call이라고도 함. 그냥 함수를 일반적으로 실행하는 방식임.

function zmoon () {
  console.log(this);
}

zmoon();

그냥 별다를것 없이 일반적으로 함수를 실행하는 가장 기본적인 방법임.
이럴경우 this는 global object로 정해져 있다.
global object란 소리는 만약 브라우저상에서 자스를 실행시킨다면 window 객체라는 소리다.

• 메서드 내에서 정의한 중첩 함수도 일반 함수로 호출되면 중첩 함수 내부의 this에는 전역 객체가 바인딩된다.
• 콜백 함수가 일반 함수로 호출되도 콜백 함수 내부의 this에 전역 객체가 바인딩된다. 즉 어떠한 함수라도 일반 함수로 호출되면 this에 전역 객체가 바인딩된다.ㄹs
• this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다. 따라서 엄격한 코드 실행 환경인 strict mode가 적용된 일반 함수 내부의 this에는 undefined가 바인딩된다. 일반 함수 내부에서 this를 사용할 필요가 없기 때문이다.
• this는 어디서든지 참조 가능하다. 전역에서 this도 전역 객체 window를 가리킨다.

2. 메서드 호출(Dot notation : 점 방식)

함수를 프로퍼티 값으로 할당하여 호출. . 앞에있는 객체가 this의 값으로 설정되어 실행됨

메서드 내부에서 this는 메서드를 호출한 객체를 가르키기 때문

3. Function.prototype.call/apply/bind 메서드에 의한 간접 호출

해당 메소드가 설정해놓은 this값(인수)이 this값으로 설정됨.
call은 메소드를 사용할때 인자의 수가 정해져있지않아서 우리가 넘겨주고싶은대로 넘겨주면 됨
apply는 항상 인자를 두개만 받음
bind는 바로 실행은 안되고 this값만 설정을 해줌

4. 생성자 함수 호출('new' keyword)

new를 붙여 함수를 실행하면, this에는 새로운 빈 객체가 지정돼서 함수가 실행된다.
또한 new를 써서 함수를 실행하면 그 함수에 return이 없었더라도, return this 코드가 알아서 실행된다
new를 써서 실행하는 함수들을 보통 Constructor function (생성자 함수) 라고함. 또한 일반적으로 생성자함수는 보통 첫글자를 대문자를 표기해줌

생성자 함수가 생성한 객체를 인스턴스라함. 생성자 함수 내부에서 this는 생성자 함수가 생성할 인스턴스를 가르킴

etc

eventhandler에 this를 쓰는건 매우 비추천함
다른 동료 팀원 개발자들에게 매우 민폐임
this는 그 자체로 매우 불확실성이 높은 인자라 가독성을 높여서 써야함

참고

https://youtu.be/ayyuU0xdbIU

정리

명시적 this 바인딩이 없는 한 늘 성립

• 전역공간에서의 this는 전역객체를 참조(브라우저에서는 window, Node.js는 global)
• 어떤 함수를 메서드로서 호출한 경우 this는 메서드 호출 주체(메서드명 앞의 객체)를 참조
• 어떤 함수를 함수로서 호출한 경우 this는 전역개체를 참조. 메서드 내부함수에서도 동일.
• 콜백 함수 내부에서의 this는 해당 콜백 함수의 제어권을 넘겨받은 함수가 정의한 바에 따르며, 정의하지 않은 경우 전역개체 참조.
• 생성자 함수에서 this는 생성될 인스턴스를 참조.

명시적 this 바인딩

• call, apply 메서드는 this를 명시적으로 지정하면서 함수 또는 메서드를 호출
• bind 메서드는 this 및 함수에 넘길 인수를 일부 지정해서 새로운 함수를 만듬
• 요소를 순회하면서 콜백 함수를 반복 호출하는 내용의 일부 메서드는 별도의 인자로 this를 받기도 함

코어자바스크립트 참고