일반 함수에서 this -> window
중첩 함수에서 this -> window
이벤트에서 this -> 이벤트 객체
메소드에서 this -> 메소드 객체
메소드 내부의 중첩 함수에서 this -> window
출처:
(this)호출할 때 결정되는 것과 (클로져)위치에 따라 결정되는 것이 있음
호출할 때 결정되는 this.
호출한 객체가 바로 this가 됨.
호출과 무관하게 고정할 수 있는 것이 bind 메소드
let someone = {
name : "secho",
whoAmI : function (){
console.log(this);
}
}
let arrow = {
name : "arrow",
whoAmI : () => {
console.log(this);
}
}
// someone. <-함수가 호출한 직접적인 부분이므로 this = 자신이 됨
// someone.whoAmI();
arrow.whoAmI();
let myWhoAmI = someone.whoAmI;
// myWhoAmI는 window에 있어서 this -> window가 됨
// myWhoAmI(); // window가 나옴 : 호출하는 방법이 달라졌기 때문
let bindedWhoAmI = myWhoAmI.bind(someone);
/*
btn.addEventListener('click', bindedWhoAmI);
- > someone객체가 this가 됨.
bind는 호출하는 방법이 어떻게 되었든 bind로 묶인 애가 this가 됨
- /
/*
btn.addEventListener('click', someone.whoAmI);
이를 호출했을 때 버튼객체를 반환함.
누가 호출했는지가 중요함. whoAmI함수를 btn에게 전달한 것.
btn이 실행 주체
- /
화살표함수는 자신의 this가 없다.
그러나 화살표함수를 둘러싸는 렉시컬 범위의 this가 사용된다.
화살표함수에서의 this를 찾을 때 바로 바깥 범위의 this를 찾으며 검색을 끝낸다.
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this|는 Person 객체를 참조
}, 1000);
}
var p = new Person();
let arrow = {
name : "arrow",
whoAmI : () => {
console.log(this); // {}
setTimeout(function() {
console.log(this); // window객체
}, 1000);
}
}