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

다음 메서드 bind는 컨텍스트를 함수에 영구적으로 바인딩할 수 있게 해줍니다. 이 메서드는 그 결과로 this가 하드코딩된 값을 갖는 새로운 함수를 반환합니다.

예제를 살펴보겠습니다.

다음과 같은 입력 필드가 있다고 가정합니다:

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

이 입력 필드에 대한 참조가 elem 변수에 저장되어 있다고 가정합니다:

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

또한 다음과 같은 함수 func가 있다고 가정합니다:

function func(param1, param2) {
	console.log(this.value + param1 + param2);
}

bind를 사용하여 함수 func의 복사본이지만, 그 안의 this가 항상 elem와 같도록 하는 새 함수를 만들어 보겠습니다:

let newFunc = func.bind(elem);

이제 newFunc 변수에는 함수가 들어 있습니다. 첫 번째 매개변수로 '1'를, 두 번째 매개변수로 '2'를 전달하여 호출해 보겠습니다 (elem은 value가 'text'인 입력 필드를 담고 있다는 점을 상기하세요):

newFunc('1', '2');

전체 코드를 모아보겠습니다:

let elem = document.getElementById('elem');

function func(param1, param2) {
	console.log(this.value + param1 + param2);
}

let newFunc = func.bind(elem);
newFunc('1', '2'); // 'text12'를 출력합니다

bind의 결과를 새로운 함수 newFunc에 할당할 필요는 없습니다. 단순히 func를 재할당할 수도 있습니다. 그러면 func는 이전과 동일한 함수이지만 this가 하드 바인딩된 상태가 됩니다:

func = func.bind(elem);

다음 코드가 주어졌을 때:

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

let elem = document.getElementById('elem');

function func(name, surname) {
	console.log(this.value + ', ' + name + ' ' + surname);
}

// 여기에 bind()를 사용한 구문을 작성하세요

func('John', 'Smit'); // 여기서 'hello, John Smit'이 출력되어야 합니다
func('Eric', 'Luis'); // 여기서 'hello, Eric Luis'이 출력되어야 합니다

지정된 위치에 bind 메서드를 사용하는 구문을 작성하여, 함수 func 내부의 this가 항상 elem 변수의 입력 필드를 가리키도록 하세요.