This?

정의

• 메소드를 호출한 객체가 저장되어있는 속성으로 함수를 호출하는 방법에 의해 결정됨

This가 만들어지는 경우

1. 일반 함수에서 this -> window

2. 중첩 함수에서 this -> window

3. 이벤트에서 this -> 이벤트 객체

4. 메소드에서 this -> 메소드 객체

5. 메소드 내부의 중첩 함수에서 this -> window

출처:

https://beomy.tistory.com/6

(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를 찾을 때 바로 바깥 범위의 this를 찾으며 검색을 끝낸다.

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this|는 Person 객체를 참조
  }, 1000);
}

var p = new Person();

함수의 내부, 콜백함수의 this는 window다.

let arrow = {
  name : "arrow",
  whoAmI :  () => {
    console.log(this); // {}
    setTimeout(function() {
      console.log(this); // window객체
    }, 1000);
  }
}