[인간JS되기] this를 분석할 수 없는 케이스

제로초님 강의 보고 정리중

 

 

 

addEventListener의 this는 무엇일까

const obj = {
    addEventListener : function(eventName, callback){
      callback(obj); // this가 window -> 땡
    },
};

header.addEventListner('click',function(){
    console.log(this); //this가 header
});

- 결론 : 위의 코드만 봐서는 this를 알 수 없다!

왜냐?  this는 호출할 때 정해지는데, addEventListner 함수호출은 어디서 되는지 알 수 없음.

- 공식문서를 보면 일반적으로 addEventListener의 this는 앞에 붙은 객체,태그로 되어있다고 명시되어 있다

따라서, 공식문서 보기 전에는 this가 무엇인지는 알 수 없는 것이 맞다

- 위의 코드에서 this는 header(addEventListner 앞에 있는 객체)를 가리킨다

- 함수는 일급 객체이기 때문에 함수의 매개변수로 전달이 가능하다

 

 

 

위의 addEventListner 부분을 화살표 함수로 변경

const header = {
    addEventListener : function(eventName, callback){
      callback(); 
      callback(); 
    },
};

header.addEventListner('click', () => {
    console.log(this); //this가 header
});

화살표함수는 부모의 this를 따라간다 

 

callback.call(header); // X
callback(); //이렇게만 가능

- 화살표함수의 특징은 call, bind, apply 이런걸 사용할 수 없고 함수가 실행되게만 할 수 있다

- 화살표함수가 들어가면, addEventListener가 정해준 값을 따르는 게 아니라 무조건 부모로부터 물려받는다 

 

 

header.addEventListner('click', () => {
    console.log(this); //this가 header
});

 

화살표 함수(선언)의 부모는 addEventListner가 아니다

addEventListner()는 호출

 

 

선언과 호출은 완전히 다른 것

함수선언에 대한 부모는 함수호출이 될 수 없다.

선언의 부모 찾기

선언부분에서 직선을 그어서 닿이는 곳을 찾아본다(안보임) => anonymous(최상단)가 된다 => 따라서 this는 window

 

 

 

---

bind / apply / call

 

bind는 a함수를 호출하는게 아니라 a함수의 this만 바꿔서 새로운 함수를 만든다

그 후, b를 다시 호출해줘야 한다

apply는 호출까지 한번에 된다

 

a.apply(window) === a.bind(window)() === a.call(window)

 

---

 

apply와 call의 함수 호출방식

 

apply는 매개변수들을 배열로 묶어서 넣어준다 

함수에 this를 안쓰면 null 넣어도 상관없다 

 

add.call(null, 3,5) //8

call은 매개변수를 순서대로 넣어준다

apply가 배열인지 call이 순서대로인지 헷갈린다면 apply(array랑 비슷하니까 배열) call은 순서대로라고 외우기