Wozu dient die JavaScript-Methode "bind"?

Question

Was ist der Nutzen von bind() in JavaScript?

Answer 1

Binden Methode

Eine bindende Implementierung könnte etwa so aussehen:

Function.prototype.bind = function () {
  const self = this;
  const args = [...arguments];
  const context = args.shift();

  return function () {
    return self.apply(context, args.concat([...arguments]));
  };
};

Die Bindungsfunktion kann eine beliebige Anzahl von Argumenten annehmen und eine neue Funktion zurückgeben .

Die neue Funktion ruft die ursprüngliche Funktion unter Verwendung der JS Function.prototype.apply Methode.
El apply Methode verwendet das erste Argument, das an die Zielfunktion übergeben wird, als ihren Kontext ( this ), und das zweite Array-Argument der Methode apply Methode ist eine Kombination aus den restlichen Argumenten der Zielfunktion und den Argumenten, die zum Aufruf der Rückgabefunktion verwendet werden (in dieser Reihenfolge).

Ein Beispiel kann etwa so aussehen:

function Fruit(emoji) {
  this.emoji = emoji;
}

Fruit.prototype.show = function () {
  console.log(this.emoji);
};

const apple = new Fruit('');
const orange = new Fruit('');

apple.show();  // 
orange.show(); // 

const fruit1 = apple.show;
const fruit2 = apple.show.bind();
const fruit3 = apple.show.bind(apple);
const fruit4 = apple.show.bind(orange);

fruit1(); // undefined
fruit2(); // undefined
fruit3(); // 
fruit4(); //

Answer 2

/**
 * Bind is a method inherited from Function.prototype same like call and apply
 * It basically helps to bind a function to an object's context during initialisation 
 * 
 * */

window.myname = "Jineesh";  
var foo = function(){ 
  return this.myname;
};

//IE < 8 has issues with this, supported in ecmascript 5
var obj = { 
    myname : "John", 
    fn:foo.bind(window)// binds to window object
}; 
console.log( obj.fn() ); // Returns Jineesh

Answer 3

Einfache Erläuterung:

bind() eine neue Funktion erstellen, einen neuen Verweis auf eine Funktion, die er an Sie zurückgibt.

In parameter nach diesem Schlüsselwort übergeben Sie den Parameter, den Sie vorkonfigurieren möchten. Es wird nicht sofort ausgeführt, sondern nur die Ausführung vorbereitet.

Sie können so viele Parameter vorkonfigurieren, wie Sie möchten.

Einfaches Beispiel zum Verständnis der Bindung:

function calculate(operation) {
  if (operation === 'ADD') {
   alert('The Operation is Addition');
  } else if (operation === 'SUBTRACT') {
   alert('The Operation is Subtraction');
  }
}

addBtn.addEventListener('click', calculate.bind(this, 'ADD'));
subtractBtn.addEventListener('click', calculate.bind(this, 'SUBTRACT'));

Answer 4

Betrachten Sie das unten aufgeführte einfache Programm,

//we create object user
let User = { name: 'Justin' };

//a Hello Function is created to Alert the object User 
function Hello() {
  alert(this.name);
}

//since there the value of this is lost we need to bind user to use this keyword
let user = Hello.bind(User);
user();

//we create an instance to refer the this keyword (this.name);

Answer 5

Die Bindungsfunktion erstellt eine neue Funktion mit dem gleichen Funktionskörper wie die Funktion, die sie aufruft. Sie wird mit diesem Argument aufgerufen. warum wir Bindungsfunktion verwenden: wenn jedes Mal eine neue Instanz erstellt wird und wir die erste anfängliche Instanz verwenden müssen, verwenden wir Bindungsfunktion.

setInterval(this.animate_to.bind(this), 1000/this.difference);