bind 메소드
bind 메소드는 함수에 컨텍스트를 바인딩합니다.
첫 번째 매개변수로 컨텍스트를 전달하고,
그 다음 매개변수로 함수의 매개변수를 전달합니다.
이 메소드는 this가 전달된 컨텍스트와 같아지는
새로운 함수를 반환합니다.
문법
함수.bind(컨텍스트, 매개변수1, 매개변수2...);
예시
다음과 같은 입력 필드가 있다고 가정해 봅시다:
<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'을 전달하여 호출해 봅시다:
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 = func.bind(elem);
