오늘 푼 테스트를 통해 그 동안 헷갈렸던 this에 대해 자세히 알 수 있게 되었다.
this란?
this는 자신을 호출한 객체를 가리킨다.
그렇기에 같은 함수라도 어디에서 호출되었는지에 따라 this가 달라진다.
- 일반 함수에서 쓰인 this는 전역 객체(window)를 가리킨다.
- 객체의 메서드에서 사용된 this는 그 메서드를 호출한 객체를 가리킨다.
- new를 붙여 함수를 실행하면 객체를 반환하는데 이때 함수 안의this는 반환된 객체를 가리킨다.
*주의 할 점
함수안의 함수인 내부함수에서의 this는 무조건 전역 객체를 가리킨다.
인자로 전해진 콜백 함수도 마찬가지이다.
→ 내부 함수는 엄밀히 말해 메소드가 아니기 때문에, 단순 함수 호출 규칙에 따라 전역객체를 가리키게 된다.
내부 함수 또는 콜백 함수에서 쓰인 this를 원하는 객체에 바인딩 하는 방법
1. arrow function 사용
arrow function은 자체 스코프를 만들지 않기 때문에 상위 스코프로 this를 찾아간다.
2. bind 함수 사용
해당 함수 뒤에 .bind(this)를 작성해주면 함수 스코프 바로 바깥에 위치한 this를 연결해준다.
3.closure 사용
함수의 내부 변수를 만들어서 사용한다.
test에서 closure, hoisting에 대한 문제는 맞췄는데
this에서 다 틀린 것을 보고 이번에 확실히 알고 넘어가야 겠다고 생각하고 자세히 공부했다.
자바스크립트를 배운지 얼마 안됐을 때는 저런 개념들을 알려줘도 하나도 이해가 되지 않았는데, 이제는 다 이해되어 머리 속에 정리된 것이 느껴져서 뿌듯했다.
#프론트엔드