JavaScript 함수 바인딩에 대한 자세한 설명_기본지식

< 입력 id="btnTest" type="button" value="Button"/>

                                                                        > :)                            document.getElementById('btnTest').onclick=handler.handlerFun ;

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

코드는 다음과 같습니다.


document.getElementById('btnTest').onclick=function(){
                    handler.handlerFun();                            onclick 프로그램은 클로저를 사용하여 handler.handlerFun() 메소드를 직접 호출합니다. 물론 이는 이 시나리오에 특정한 솔루션입니다. 여러 개의 클로저를 생성하면 코드를 이해하고 디버그하기가 어려워질 수 있습니다.


커스텀 바인드 기능




코드 복사


코드는 다음과 같습니다.

함수 바인드(fn,context){

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

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