this
전역 컨텍스트를 살펴보면서, 구성요소 this는 기본적으로 Window인 것을 알 수 있었다.
그렇다면, this가 Window를 가르키지 않는 경우는 언제일까?
const obj = {
a: function() { console.log(this); },
};
obj.a(); // obj위의 메서드 a 안의 this는 객체 obj를 가르킨다.
객체의 메서드를 호출할 때 this를 내부적으로 바꾸어 주기 때문이다.
위의 예제에서 다음과 같이 코드를 추가하면 결과가 달라진다.
const a2 = obj.a;
a2();이때 this는 객체 obj가 아닌 원래 가르키던 Window를 가르킨다.
그 이유는 a2는 obj.a를 꺼내와 객체 밖으로 불러냈기 때문에,
더이상 객체obj의 메서드에 포함되어 있지 않기 때문이다.
즉 this는 원래는 Window를 가르키지만, 객체 안에 포함되거나,
객체의 메서드 안에 포함된다면 포함한 객체를 가르킨다.
this를 일반 함수나,변수에서 사용할 때에는 new 생성자를 사용하여 생성하고 this를 적용한다.
실무에서는 이벤트리스너나,제이쿼리,리액트를 사용할때 문제가 생긴다.
document.body.onclick = function() {
console.log(this); //
}위의 예제에서 this는 window를 가르켜야 하지만 body를 가르킨다.
이벤트가 발생할 때, 내부적으로 this가 바뀐 것이다.
내부적으로 바뀐 것이기 때문에, 동작을 외울 수밖에 없다.
이런 경우에는 this를 that이라는 변수에 저장을 하는 방법과 ES6의 ARROW Function을 사용하는 방법이 있다. ARROW Function을 사용하면 this로 window대신 상위 함수를 지칭한다.
출처 :https://miiingo.tistory.com/365
https://www.zerocho.com/category/JavaScript/post/5741d96d094da4986bc950a0
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
https://velog.io/@daybreak/Javascript-map%ED%95%A8%EC%88%98
https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d
https://www.zerocho.com/category/JavaScript/post/5b0645cc7e3e36001bf676eb
