[Javascript] this

클래스 생성자 이야기하다가 등장한 this 키워드. 이 키워드는 사용위치에 따라 참조되는 공간이 다르다고 언급했습니다. 그래서 this키워드에 대해 조금 더 알아보고 넘어갈까합니다.

이 포스트에서는 this를 대략적으로만 알아보고 있습니다. this에 대한 더 자세한 용법은 다음을 참조해주세요.

2021.11.12 - [Programming/Javascript] - 자바스크립트의 this

자바스크립트의 this

---

this가 사용된 위치	this가 참조하는 것
함수 외부(톱 레벨)	글로벌 객체
함수	글로벌 객체
메소드	호출하는 곳의 객체
생성자	생성한 인스턴스 (생성자가 존재하는 객체 자신)
이벤트 리스너	이벤트가 발생한 곳
call/apply 메소드	인수로 지정된 객체

 

다 이미 언급했던 내용들인데 마지막 두가지인 이벤트 리스너와, call/apply메소드가 조금 걸립니다.

 

우선 이벤트 리스너는 이벤트가 발생한 곳인데요. 이벤트란 웹브라우저 상에서 일어나는 동작들을 이야기합니다. 예를들면 브라우저에서 클릭을 하거나, 드래그를 하거나, 페이지가 로드되거나 하는 동작들을 모두 이벤트라고 합니다. 이는 나중에 자바스크립트로 웹페이지의 동작에 대한 것을 다룰때 자세하게 다룰테니 우선 이정도만 알고계시면 됩니다.

 

다음 call/apply 메소드는 Function 객체가 제공하는 메소드인데, 함수를 호출하는 역할을 합니다. call메소드는 인수를 개별 자료형으로 전달하고 apply메소드는 배열로 인수를 전달한다는 차이점을 가지고 있습니다.

 

다음과 같이 사용합니다.

func.call(that, arg1, ...);
func.apply(that, [args]);

이때 인수 that에 넣어지는 인수가 func함수 내에서 this가 가리키게 될 대상이 됩니다.

 

+내장 객체를 소개하면서 나왔던 that 인수도 마찬가지로 this가 가리키게될 대상입니다.

---