Q. 자바스크립트에서 this가 아는데로 설명해주세요
위와 같은 질문을 받으면 어떻게 대답할것인지 상상하면서 내용을 요약해 보았다.
그 전에 this를 왜 알아야 하는지도 모르겠어서 okky에 질문해서 주신 답변들 중에 가장 쉽게 납득이 갔던 예제는 아래와 같은 상황이다.
예를 들어,
같은 클래스의 버튼들에 클릭 이벤트가 있는데 클릭했던 버튼만 삭제하는 기능을 구현한다고 가정하자.
this가 없다면,
클릭!을 하면 -> 클릭했던 버튼만 삭제해야 하는데 해당 클래스의 모든 버튼이 삭제될 것이다.
this가 있다면,
클릭!을 하면 -> 클릭했던 버튼을 this 키워드로 알려주고 해당 버튼만 삭제할 수 있다.
여기서부터 내가 아는 this에 대한 답변
다른 대부분의 객체지향언어에서 this는 클래스로 생성한 인스턴스의 객체를 말합니다. 클래스에서만 사용가능했기 때문에 크게 어려운 개념이 아니었습니다.
반면에 자바스크립트에서의 this는 어디서든 사용이 가능하기 때문에, 상황에 따라 this가 바라보는 대상이 달라집니다.
this를 사용하는 경우를 크게 두 가지로 나누어 볼 수가 있는데,
첫 번째는 상황에 따라 this가 달라지는 경우이고, 두 번째는 명시적으로 this를 특정 별도의 대상에 바인딩하는 경우입니다.
상황에 따라 this가 달라지는 경우 즉, 명시적으로 this 바인딩이 없는 한 항상 성립하는 내용입니다.
전역공간에서 this는 전역객체를 참조하고, 어떤 함수를 메서드로서 호출한 경우 this는 메서드의 호출 주체를 참조합니다. 어떤 함수를 함수로서 호출한 경우 this는 전역객체를 참조합니다. 콜백함수 내부에서의 this는 해당 콜백 함수의 제어권을 넘겨받은 함수가 정의한 바에 따르며, 정의하지 않은 경우에는 전역객체를 참조합니다. 생성자 함수에서의 this는 생성될 인스턴스를 참조합니다.
두 번째로 명시적으로 this를 바인딩하는 경우에는
call, apply 메서드를 사용해서 this를 명시적으로 지정하면서 함수 또는 메서드를 호출합니다. bind메서드는 this 및 함수에 넘길 인수를 일부 지저애서 새로운 함수를 만듭니다. 요소를 순회하면서 콜백 함수를 반복 호출하는 내용의 일부 메서드는 별도의 인자로 this를 받기도 합니다.
ES6에 새롭게 추가된 화살표 함수는 실행컨텍스트 생성 시 this를 바인딩하는 과정이 제외되었습니다. 즉 화살표 함수 내부에는 this가 아예 없으며, 접근하고자 하면 스코프체인상 가장 가까운 this에 접근합니다.
