JavaScript 함수 바인딩

간단한 함수 바인딩 JavaScript와 DOM 간의 상호작용에서는 함수 바인딩이 필요한 경우가 많습니다. 함수를 정의한 후 이를 특정 DOM 요소 또는 컬렉션의 이벤트 트리거에 바인딩합니다. 함수 바인딩은 콜백과 함께 자주 사용됩니다. 코드 실행 환경을 유지하면서 함수를 변수로 전달하는 함수 및 이벤트 핸들러.

" 경고(this.message); } ; document.GetelementByid('btNtest'). Onclight = handler.handlerfun; & gt; & lt;/body & gt;

Zi는 하나의 핸들러 객체를 생성했으며 handler.handlerFun() 메서드는 DOM 버튼의 클릭 이벤트 핸들러로 할당됩니다. 디자인 의도는 다음과 같습니다. 버튼을 클릭하면 이 메서드가 트리거되고 핸들러에서 정의한 메시지를 표시하는 대화 상자가 나타납니다. 그러나 클릭 후에는 대화 상자의 내용이 정의되지 않습니다. 클로저에 익숙한 학생들은 handler.handlerFun() 메소드의 실행 환경이 저장되지 않는다는 것이 문제라는 것을 쉽게 알 수 있습니다. this 객체는 결국 핸들러 대신 DOM 버튼을 가리킵니다. 클로저를 사용하여 이 문제를 해결하고 함수 바인딩 문

document.getElementById('btnTest').onclick=function(){ 이런 방식으로 예상되는 결과를 얻을 수 있습니다. 이 솔루션은 onclick 프로그램 내에서 클로저를 사용하여 handler.handlerFun() 메서드를 직접 호출합니다. 물론 이는 이 시나리오에 특정한 솔루션이므로 코드를 이해하고 디버깅하기가 어려울 수 있습니다.

사용자 지정 바인딩 기능

함수 바인딩(fn,context){ > bind( ) 함수는 바인딩 함수, 실행 환경이라는 두 가지 매개변수를 취하고 함수를 반환합니다. 실행 환경에서 바인딩 함수를 호출합니다. 간단해 보이지만 그 기능은 매우 강력합니다. 클로저는 bing()에서 생성되며, 클로저는 전달된 함수를 호출하기 위해 apply()를 사용하고, 실행 환경과 매개변수를 apply()에 전달합니다. 함수가 아니라 바인딩()입니다. 반환된 함수가 호출되면 모든 인수가 주어지면 주어진 함수에서 전달된 함수를 실행합니다. 위의 예에서 handler.handlerFun을 호출하면 모든 매개변수가 바인딩된 함수를 통해 전달되기 때문에 여전히 매개변수 이벤트를 얻을 수 있습니다.

요약

함수 포인터 형태로 함수를 전달하고 특정 환경에서 함수를 실행해야 하는 경우에는 사용자 정의된 바인드() 함수를 주로 이벤트에 사용할 수 있습니다. 핸들러와 setTimeout, setInterval. 하지만 이 바인딩 방식은 일반 함수에 비해 메모리 오버헤드가 더 많이 필요하므로 꼭 필요한 경우에만 사용하도록 하세요.