Detaillierte Erläuterung der Verwendung von Funktionsbindungscode für die Javascript-Interaktion

Funktionsbindung

Bei der Interaktion zwischen JavaScript und DOM ist es oft notwendig, eine Funktion zu definieren und sie dann an ein bestimmtes DOM-Element zu binden Sammlung. In einem Ereignisauslöserprogramm werden Bindungsfunktionen häufig zusammen mit Rückruffunktionen und Ereignishandlern verwendet, um Funktionen als Variablen zu übergeben und gleichzeitig die Codeausführungsumgebung beizubehalten.

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

Der obige Code erstellt ein Handlerobjekt. Die Methode handler.handlerFun() wird als Ereignishandler für eine DOM-Schaltfläche zugewiesen. Wenn die Taste gedrückt wird, wird diese Funktion aufgerufen und eine Warnbox angezeigt. Obwohl es so aussieht, als ob im Warnfeld „Ereignis behandelt“ angezeigt werden sollte, wird tatsächlich „undefiend“ angezeigt. Das Problem besteht darin, dass die Umgebung von handler.handleClick() nicht gespeichert wird, sodass dieses Objekt letztendlich auf die DOM-Schaltfläche statt auf den Handler zeigt

Sie können Schließungen verwenden, um dieses Problem zu beheben

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

Natürlich ist dies eine Lösung speziell für dieses Szenario. Das Erstellen mehrerer Schließungen kann dazu führen, dass der Code schwer zu verstehen und zu debuggen ist. Ein besserer Ansatz ist die Verwendung der Funktionsbindung

Eine einfache Bindungsfunktion bind() nimmt eine Funktion und eine Umgebung und gibt eine Funktion zurück, die die gegebene Funktion in der gegebenen Umgebung aufruft, und alle Parameter intakt übergeben

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

Diese Funktion scheint einfach, aber ihre Funktion ist sehr leistungsstark. In bind() wird ein Abschluss erstellt. Der Abschluss ruft mit apply() die eingehende Funktion auf und übergibt das Kontextobjekt und die Parameter an apply(). Wenn die zurückgegebene Funktion aufgerufen wird, führt sie die übergebene Funktion in der angegebenen Umgebung aus und gibt alle Parameter an.

<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 definiert eine native bind()-Methode für alle Funktionen, was die Bedienung weiter vereinfacht.

Solange ein Funktionszeiger als Wert übergeben wird und die Funktion in einer bestimmten Umgebung ausgeführt werden muss, wird der Nutzen der gebundenen Funktion hervorgehoben. Sie werden hauptsächlich in Event-Handlern und setTimeout() und setInterval() verwendet. Allerdings haben gebundene Funktionen einen höheren Overhead als normale Funktionen, sie benötigen mehr Speicher und da mehrere Funktionsaufrufe etwas langsamer sind, sollten sie am besten nur bei Bedarf verwendet werden.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Funktionsbindungscode für die Javascript-Interaktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!