Wozu dient die JavaScript-Methode "bind"?

Question

Was ist der Nutzen von bind() in JavaScript?

Answer 1

Zusammenfassung:

El bind() Methode nimmt ein Objekt als erstes Argument und erstellt eine neue Funktion. Wenn die Funktion aufgerufen wird, wird der Wert von this im Funktionskörper wird das Objekt sein, das als Argument in der bind() Funktion.

Wie funktioniert this trotzdem in JS arbeiten

Der Wert von this in Javascript ist immer davon abhängig, welches Objekt die Funktion aufgerufen wird. Der Wert bezieht sich immer auf das Objekt links vom Punkt, von dem aus die Funktion aufgerufen wird . Im Falle des globalen Geltungsbereichs ist dies window (oder global in nodeJS ). Nur call , apply y bind können diese Bindung unterschiedlich verändern. Hier ist ein Beispiel, um zu zeigen, wie das Schlüsselwort this funktioniert:

let obj = {
  prop1: 1,
  func: function () { console.log(this); } 
}

obj.func();   // obj left of the dot so this refers to obj

const customFunc = obj.func;  // we store the function in the customFunc obj

customFunc();  // now the object left of the dot is window, 
               // customFunc() is shorthand for window.customFunc()
               // Therefore window will be logged

Wie wird bind verwendet?

Bind kann bei der Überwindung von Schwierigkeiten mit dem this Schlüsselwort durch ein festes Objekt, bei dem this verweisen wird. Zum Beispiel:

var name = 'globalName';

const obj = {
  name: 'myName',
  sayName: function () { console.log(this.name);}
}

const say = obj.sayName; // we are merely storing the function the value of this isn't magically transferred

say(); // now because this function is executed in global scope this will refer to the global var

const boundSay = obj.sayName.bind(obj); // now the value of this is bound to the obj object

boundSay();  // Now this will refer to the name in the obj object: 'myName'

Sobald die Funktion an eine bestimmte Funktion gebunden ist this Wertes können wir ihn weitergeben und ihn sogar auf Eigenschaften anderer Objekte anwenden. Der Wert von this gleich bleiben.

Answer 2

Die Methode bind() erzeugt eine neue Funktionsinstanz, deren Wert an den Wert gebunden ist, der an bind() übergeben wurde. Zum Beispiel:

   window.color = "red"; 
   var o = { color: "blue" }; 
   function sayColor(){ 
       alert(this.color); 
   } 
   var objectSayColor = sayColor.bind(o); 
   objectSayColor(); //blue 

Hier wird eine neue Funktion namens objectSayColor() aus sayColor() erstellt, indem bind() aufgerufen und das Objekt o übergeben wird. Die Funktion objectSayColor() hat einen Wert, der o entspricht, so dass der Aufruf der Funktion, auch als globaler Aufruf, dazu führt, dass die Zeichenfolge "blue" angezeigt wird.

Referenz: Nicholas C. Zakas - PROFESSIONAL JAVASCRIPT® FOR WEB DEVELOPERS

Answer 3

Erstellen einer neuen Funktion durch Binden von Argumenten an Werte

El bind Methode erzeugt eine neue Funktion aus einer anderen Funktion mit einem oder mehreren Argumenten, die an bestimmte Werte gebunden sind, einschließlich der impliziten this Argument.

Teilweise Anwendung

Dies ist ein Beispiel für Teilanwendung . Normalerweise geben wir eine Funktion mit allen Argumenten an, die einen Wert ergibt. Dies wird als Funktionsanwendung bezeichnet. Wir wenden die Funktion auf ihre Argumente an.

Eine Funktion höherer Ordnung (HOF)

Eine Teilanwendung ist ein Beispiel für eine höherwertige Funktion (HOF), weil es eine neue Funktion mit einer geringeren Anzahl von Argumenten ergibt.

Mehrere Argumente binden

Sie können verwenden bind um Funktionen mit mehreren Argumenten in neue Funktionen umzuwandeln.

function multiply(x, y) { 
    return x * y; 
}

let multiplyBy10 = multiply.bind(null, 10);
console.log(multiplyBy10(5));

Umwandlung von Instanzmethode in statische Funktion

Im häufigsten Anwendungsfall, wenn der Aufruf mit einem Argument erfolgt, wird die bind Methode wird eine neue Funktion erstellt, die die this Wert an einen bestimmten Wert gebunden. Dadurch wird eine Instanzmethode in eine statische Methode umgewandelt.

function Multiplier(factor) { 
    this.factor = factor;
}

Multiplier.prototype.multiply = function(x) { 
    return this.factor * x; 
}

function ApplyFunction(func, value) {
    return func(value);
}

var mul = new Multiplier(5);

// Produces garbage (NaN) because multiplying "undefined" by 10
console.log(ApplyFunction(mul.multiply, 10));

// Produces expected result: 50
console.log(ApplyFunction(mul.multiply.bind(mul), 10));

Implementierung eines zustandsabhängigen Rückrufs

Das folgende Beispiel zeigt, wie die Bindung von this kann eine Objektmethode als Callback fungieren, mit dem der Zustand eines Objekts leicht aktualisiert werden kann.

function ButtonPressedLogger()
{
   this.count = 0;
   this.onPressed = function() {
      this.count++;
      console.log("pressed a button " + this.count + " times");
   }
   for (let d of document.getElementsByTagName("button"))
      d.onclick = this.onPressed.bind(this);
}

new ButtonPressedLogger();      

<button>press me</button>
<button>no press me</button>

Answer 4

Ich werde die Bindung sowohl theoretisch als auch praktisch erklären

bind in javascript ist eine Methode -- Function.prototype.bind . bind ist eine Methode. Sie wird auf Funktionsprototyp aufgerufen. Diese Methode erzeugt eine Funktion, deren Körper der Funktion, auf der sie aufgerufen wird, ähnlich ist, aber das "this" bezieht sich auf den ersten Parameter, der an die bind-Methode übergeben wird. Ihre Syntax lautet

     var bindedFunc = Func.bind(thisObj,optionsArg1,optionalArg2,optionalArg3,...);

Beispiel:--

  var checkRange = function(value){
      if(typeof value !== "number"){
              return false;
      }
      else {
         return value >= this.minimum && value <= this.maximum;
      }
  }

  var range = {minimum:10,maximum:20};

  var boundedFunc = checkRange.bind(range); //bounded Function. this refers to range
  var result = boundedFunc(15); //passing value
  console.log(result) // will give true;

Answer 5

Wie bereits erwähnt, Function.bind() können Sie den Kontext angeben, in dem die Funktion ausgeführt werden soll (d.h. Sie können angeben, welches Objekt die this Schlüsselwort im Hauptteil der Funktion aufgelöst wird.

Ein paar analoge Toolkit-API-Methoden, die einen ähnlichen Dienst leisten:

jQuery.proxy()

Dojo.hitch()