대부분의 경우, this의 값은 함수를 호출하는 방법에 의해 결정된다.

<aside> 💡 호출한 객체 === this

</aside>

밑에서 whoAmI()를 호출하는 주체는 person이라는 객체이고, localwhoAmI();를 호출하는 주체는 global, 즉 자바스크립트 코드를 실행하는 window, 즉 브라우저이다.

const person = {
	name : "john",
  whoAmI: function(){
    console.log(this)
  }
}
// 여기서의 this는 person. person이 호출하니까.
person.whoAmI();  // name : "john"

// 여기서의 this는 window. localwhoAmI 안의 whoAmI를 window가 호출
const localwhoAmI = person.whoAmI;
localwhoAmI();   // name: "window". strict mode에서는 undefined

html에 버튼이 하나 있고 얘에 대한 이벤트리스너를 하나 만들어보자.

클릭을 하면 그 결과로 버튼이 출력된다. 얘를 호출하는 주체에 따라 달라지는 것.

addEventListener의 괄호 안의 이 함수들은 이 때 바로 호출되는 것이 아니고, 이벤트 리스너로 btn에게 넘겨주는 것이다. 그럼 버튼이 눌러질때마다 버튼이 이 함수를 실행하니까, 주체는 버튼이 되는 것. person.whoAmI를 넘겨주나 localwhoAmI를 넘겨주나 같을 것이다.

var btn = document.getElementByID('btn');
btn.addEventListener('click', person.whoAmI);  // <button id='btn'>...</button>
btn.addEventListener('click', localwhoAmI);  // <button id='btn'>...</button>

bind

호출하는 방법은 같은데, bind로 묶였다. 호출과 무관하게 this를 특정한 객체에 묶어줄 수 있다!!!

// 호출하는 객체는 window지만
const bindwhoAmI = person.whoAmI.bind(person);
bindwhoAmI();  // name : john

콜백 함수일 때

콜백 함수 내부의 this는 전역 객체 window를 가리킨다.

화살표 함수일 때(참고)