자바스크립트의 동적 this

⚡️ 동적으로 결정되는 this

함수의 환경 정보

• 함수를 선언할 때 결정되는 것 👉 함수의 scope
• 함수를 호출할 때 결정되는 것 👉 함수의 this

• 변수(또는 클로저)는 선언과 동시에 스코프가 결정되는 것과 달리, 자바스크립트의 this는 함수를 호출하는 방법에 의해 동적으로 결정된다.
• 핵심은 누가 🤔 호출 했는지를 파악하는 것이다.

this === 함수를 호출한 대상

var name = '나전역';

var person = {
  name: '이지역',
  getName: function() {
    console.log(this, this.name);
  },
}

// 어떻게 호출되었는지에 따라 함수의 this가 동적으로 결정됨

person.getName(); // person 객체, '이지역' 출력

var getName = person.getName;
getName(); // global(window) 객체, '김전역' 출력

🔌 this를 강제로 결정하기

• 어떻게 호출되었는지와 무관하게 강제로 바인딩하는 방법도 있다.
• bind 메소드는 immutable, 즉 원본 변경을 하지 않고 복제본을 반환하므로 반드시 새 변수에 할당해줘야한다.
• call, apply 메소드는 this가 될 객체와 값을 차례로 매개 변수로 넣고 그 함수를 호출하며, 그 결과를 반환한다. (bind와 차이점 인지하기)

var bindedGetName = getName.bind(person);
bindedGetName(); // person 객체, '이지역' 출력

getName.call(person); // person 객체, '이지역' 출력
getName.apply(person); // person 객체, '이지역' 출력

🔗 콜백 함수의 this

• 함수가 고차 함수의 콜백으로 전달될 때는 호출되어 전달되는 것이 아니다.
• 그 고차 함수의 내부 로직에 따라 인자로 들어온 콜백 함수가 실행(호출)되므로 this는 그 로직에 따라 동적으로 결정된다.

var btn = document.getElementById('btn');

btn.addEventListener('click', person.getName);
// btn 클릭시 -> btn 객체, undefined 출력
btn.addEventListener('click', getName);
// btn 클릭시 -> btn 객체, undefined 출력

// 단, 이미 강제로 binding된 있는 함수를 전달하면 this가 바뀌지 않는다.

btn.addEventListener('click', bindedGetName);
// btn 클릭시 -> person 객체, '이지역' 출력

참고 : 자바스크립트 this? 간단히 핵심만 파악하기 | 코드종