bind 메소드

bind 메소드는 함수에 컨텍스트를 바인딩합니다. 첫 번째 매개변수로 컨텍스트를 전달하고, 그 다음 매개변수로 함수의 매개변수를 전달합니다. 이 메소드는 this가 전달된 컨텍스트와 같아지는 새로운 함수를 반환합니다.

문법

javascript함수.bind(컨텍스트, 매개변수1, 매개변수2...);

예시

다음과 같은 입력 필드가 있다고 가정해 봅시다:

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

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

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

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

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

bind를 사용하여 함수 func의 복사본이지만 내부의 this가 항상 elem와 같도록 하는 새로운 함수를 만들어 봅시다:

javascriptlet newFunc = func.bind(elem);

이제 변수 newFunc에는 함수가 들어 있습니다. 첫 번째 매개변수로 '1'을, 두 번째 매개변수로 '2'을 전달하여 호출해 봅시다:

javascriptnewFunc('1', '2');

모든 것을 함께 모아봅시다:

javascriptlet 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를 덮어쓸 수도 있습니다:

javascriptfunc = func.bind(elem);

같이 보기