JavaScript에서 call 메서드를 사용한 컨텍스트 바인딩

자, 이제 우리는 this가 실제로 어떻게 동작하는지 살펴보았습니다. 이제 함수가 호출되는 컨텍스트(즉, this가 무엇과 동일한지)를 강제로 지정할 수 있는 메서드를 살펴보겠습니다.

우리가 살펴볼 첫 번째 메서드는 call이라고 합니다. 예제를 통해 그 작동을 살펴보겠습니다. 다음과 같은 입력 필드가 있다고 가정해 봅시다:

<input id="elem" value="text">

이 입력 필드에 대한 참조를 가져와 변수 elem에 저장해 보겠습니다:

let elem = document.querySelector('#elem');

이제 this.value를 출력하는 함수 func를 만들어 보겠습니다:

function func() {
	console.log(this.value);
}

지금은 우리 함수가 this가 무엇을 참조하는지 모릅니다. 만약 addEventListener를 통해 바인딩했다면 그렇겠지만, 우리는 그렇게 하지 않을 것입니다. 대신, 우리는 단순히 함수를 호출하면서 this가 elem과 같아야 한다고 지정할 것입니다.

이는 다음과 같이 수행됩니다: func.call(elem). 이 코드는 func()와 같이 함수를 간단히 호출하는 것과 동일하지만, this가 elem와 같다는 조건이 추가됩니다.

따라서 call 메서드의 구문은 다음과 같습니다: function.call(object). 모든 것을 함께 모아보겠습니다:

let elem = document.querySelector('#elem');

function func() {
	console.log(this.value); // 입력 필드의 value를 출력합니다
}
func.call(elem);

다음 함수가 주어졌습니다:

function func() {
	console.log(this.value);
}

세 개의 입력 필드가 주어졌습니다:

<input id="elem1" value="text1">
<input id="elem2" value="text2">
<input id="elem3" value="text3">

call 메서드와 func 함수를 사용하여 각 입력 필드의 value를 화면에 출력하세요.