자바스크립트 상호작용을 위해 함수 바인딩 코드를 사용하는 방법에 대한 자세한 설명

Function Binding

함수 바인딩은 javascript가 DOM과 상호 작용할 때 자주 사용됩니다. 함수를 정의한 다음 이를 특정 DOM 요소 또는 컬렉션의 이벤트 트리거에 바인딩합니다. 함수 및 이벤트 핸들러는 종종 결합됩니다. 코드 실행 환경을 유지하면서 함수를 변수로 전달하기 위해 함께 사용됩니다.

<button id="btn">按钮</button>
<script>      
  var handler={
    message:"Event handled.",
    handlerFun:function(){
      alert(this.message);
    }
  };
btn.onclick = handler.handlerFun;
</script>

위 코드는 핸들러라는 개체를 생성합니다. handler.handlerFun() 메서드는 DOM 버튼에 대한 이벤트 핸들러로 할당됩니다. 버튼을 누르면 이 함수가 호출되고 경고 상자가 표시됩니다. 경고 상자에는 이벤트 처리됨이 표시되어야 하는 것처럼 보이지만 실제로는 undefiend가 표시됩니다. 문제는 handler.handleClick()의 환경이 저장되지 않아서 이 객체가 결국 핸들러 대신 DOM 버튼을 가리키게 된다는 것입니다

클로저를 사용하여 이 문제를 해결할 수 있습니다

<button id="btn">按钮</button>
<script>      
var handler={
  message:"Event handled.",
  handlerFun:function(){
    alert(this.message);
  }
};
btn.onclick = function(){
  handler.handlerFun();  
}
</script>

물론 이것은 이 시나리오와 관련된 솔루션을 사용하면 여러 개의 클로저를 생성하면 코드를 이해하고 디버그하기가 어려워질 수 있습니다. 더 나은 접근 방식은 함수 바인딩을 사용하는 것입니다.

간단한 바인딩 함수인 바인딩()은 함수와 환경을 가져와 주어진 환경에서 주어진 함수를 호출하는 함수를 반환하고 모든 인수는 그대로 유지합니다. 동적으로 전달합니다.

function bind(fn,context){
  return function(){
    return fn.apply(context,arguments);
  }
}

This 기능은 단순해 보이지만 그 기능은 매우 강력합니다. 클로저는 바인드()에서 생성됩니다. 클로저는 apply()를 사용하여 들어오는 함수를 호출하고 컨텍스트 객체와 매개변수를 apply()에 전달합니다. 반환된 함수가 호출되면 지정된 환경에서 전달된 함수를 실행하고 모든 매개변수를 제공합니다.

<button id="btn">按钮</button>
<script> 
function bind(fn,context){
  return function(){
    return fn.apply(context,arguments);
  }
}     
var handler={
  message:"Event handled.",
  handlerFun:function(){
    alert(this.message);
  }
};
btn.onclick = bind(handler.handlerFun,handler);
</script>

ECMAScript5는 모든 함수에 대한 기본 바인딩() 메서드를 정의하여 작업을 더욱 단순화합니다.

함수 포인터가 값의 형태로 전달되고 함수가 특정 환경에서 실행되어야 하는 한 바인딩된 함수의 효율성이 강조됩니다. 주로 이벤트 핸들러와 setTimeout() 및 setInterval()에서 사용됩니다. 그러나 바인딩된 함수는 일반 함수보다 오버헤드가 더 많고 더 많은 메모리가 필요하며 여러 함수 호출이 약간 느리기 때문에 필요할 때만 사용하는 것이 가장 좋습니다.

위 내용은 자바스크립트 상호작용을 위해 함수 바인딩 코드를 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!