Wozu dient die JavaScript-Methode "bind"?

Question

Was ist der Nutzen von bind() in JavaScript?

Answer 1

Bind erstellt eine neue Funktion, die die this innerhalb der Funktion als Parameter, der an bind() .

Hier ist ein Beispiel, das zeigt, wie man bind eine Mitgliedsmethode zu übergeben, die die richtige this :

var myButton = {
  content: 'OK',
  click() {
    console.log(this.content + ' clicked');
  }
};

myButton.click();

var looseClick = myButton.click;
looseClick(); // not bound, 'this' is not myButton - it is the globalThis

var boundClick = myButton.click.bind(myButton);
boundClick(); // bound, 'this' is myButton

Das wird ausgedruckt:

OK clicked
undefined clicked
OK clicked

Sie können auch zusätzliche Parameter nach dem ersten ( this ) Parameter und bind wird diese Werte an die ursprüngliche Funktion weitergeben. Alle zusätzlichen Parameter, die Sie später an die gebundene Funktion übergeben, werden nach den gebundenen Parametern übergeben:

// Example showing binding some parameters
var sum = function(a, b) {
  return a + b;
};

var add5 = sum.bind(null, 5);
console.log(add5(10));

Das wird ausgedruckt:

15

Überprüfen Sie JavaScript Funktion binden für weitere Informationen und interaktive Beispiele.

Update: ECMAScript 2015 bietet Unterstützung für => Funktionen. => Funktionen sind kompakter und verändern nicht die this Zeiger aus ihrem Definitionsbereich, so dass Sie möglicherweise nicht bind() wie oft. Wenn Sie zum Beispiel eine Funktion für Button aus dem ersten Beispiel, um die Verbindung zwischen click Callback zu einem DOM-Ereignis, die folgenden sind alle gültige Möglichkeiten, das zu tun:

var myButton = {
  ... // As above
  hookEvent(element) {
    // Use bind() to ensure 'this' is the 'this' inside click()
    element.addEventListener('click', this.click.bind(this));
  }
};

Oder:

var myButton = {
  ... // As above
  hookEvent(element) {
    // Use a new variable for 'this' since 'this' inside the function
    // will not be the 'this' inside hookEvent()
    var me = this;
    element.addEventListener('click', function() { me.click() });
  }
};    

Oder:

var myButton = {
  ... // As above
  hookEvent(element) {
    // => functions do not change 'this', so you can use it directly
    element.addEventListener('click', () => this.click());
  }
};

Answer 2

Die einfachste Verwendung von bind() ist es, eine Funktion zu schaffen, die unabhängig von wie sie aufgerufen wird, mit einer bestimmten this Wert.

x = 9;
var module = {
    x: 81,
    getX: function () {
        return this.x;
    }
};

module.getX(); // 81

var getX = module.getX;
getX(); // 9, because in this case, "this" refers to the global object

// create a new function with 'this' bound to module
var boundGetX = getX.bind(module);
boundGetX(); // 81

Weitere Informationen finden Sie unter diesem Link auf MDN Web Docs:

Funktion.prototype.bind()

Answer 3

binden erlaubt-

• den Wert von "this" auf ein bestimmtes Objekt setzen. Dies ist sehr hilfreich, da manchmal este ist nicht das, was beabsichtigt ist.
• Wiederverwendungsmethoden
• eine Funktion striegeln

Sie haben zum Beispiel eine Funktion zum Abzug der monatlichen Clubgebühren

function getMonthlyFee(fee){
  var remaining = this.total - fee;
  this.total = remaining;
  return this.name +' remaining balance:'+remaining;
}

Nun möchten Sie diese Funktion für ein anderes Clubmitglied wiederverwenden. Beachten Sie, dass die monatliche Gebühr von Mitglied zu Mitglied unterschiedlich ist.

Nehmen wir an, Rachel hat ein Guthaben von 500 und einen monatlichen Mitgliedsbeitrag von 90.

var rachel = {name:'Rachel Green', total:500};

Erstellen Sie nun eine Funktion, die immer wieder verwendet werden kann, um die Gebühr jeden Monat von ihrem Konto abzubuchen

//bind
var getRachelFee = getMonthlyFee.bind(rachel, 90);
//deduct
getRachelFee();//Rachel Green remaining balance:410
getRachelFee();//Rachel Green remaining balance:320

Nun könnte dieselbe getMonthlyFee-Funktion für ein anderes Mitglied mit einem anderen Mitgliedsbeitrag verwendet werden. Beispiel: Ross Geller hat ein Guthaben von 250 und eine monatliche Gebühr von 25

var ross = {name:'Ross Geller', total:250};
//bind
var getRossFee = getMonthlyFee.bind(ross, 25);
//deduct
getRossFee(); //Ross Geller remaining balance:225
getRossFee(); //Ross Geller remaining balance:200

Answer 4

Von die MDN-Dokumente auf Function.prototype.bind() :

El bind() Methode erzeugt eine neue Funktion, die beim Aufruf ihre this-Schlüsselwort auf den angegebenen Wert gesetzt wird, wobei eine bestimmte Folge von Argumenten, die beim Aufruf der neuen Funktion vor den angegebenen Argumenten stehen.

Und was bedeutet das?!

Nun, nehmen wir eine Funktion, die wie folgt aussieht:

var logProp = function(prop) {
    console.log(this[prop]);
};

Nehmen wir nun ein Objekt, das wie folgt aussieht:

var Obj = {
    x : 5,
    y : 10
};

Wir können unsere Funktion wie folgt an unser Objekt binden:

Obj.log = logProp.bind(Obj);

Jetzt können wir Obj.log irgendwo in unserem Code:

Obj.log('x'); // Output : 5
Obj.log('y'); // Output : 10

Das funktioniert, weil wir den Wert von this zu unserem Objekt Obj .

---

Wirklich interessant wird es, wenn Sie nicht nur einen Wert für this sondern auch für sein Argument prop :

Obj.logX = logProp.bind(Obj, 'x');
Obj.logY = logProp.bind(Obj, 'y');

Das können wir jetzt tun:

Obj.logX(); // Output : 5
Obj.logY(); // Output : 10

Anders als bei Obj.log müssen wir nicht bestehen x o y weil wir diese Werte bei der Bindung übergeben haben.

Answer 5

Variablen haben einen lokalen und einen globalen Geltungsbereich. Nehmen wir an, dass wir zwei Variablen mit demselben Namen haben. Die eine ist global definiert und die andere ist innerhalb einer Funktions-Schließung definiert, und wir wollen den Wert der Variablen erhalten, die sich innerhalb der Funktions-Schließung befindet. In diesem Fall verwenden wir diese bind()-Methode. Bitte sehen Sie sich das folgende einfache Beispiel an:

var x = 9; // this refers to global "window" object here in the browser
var person = {
  x: 81,
  getX: function() {
    return this.x;
  }
};

var y = person.getX; // It will return 9, because it will call global value of x(var x=9).

var x2 = y.bind(person); // It will return 81, because it will call local value of x, which is defined in the object called person(x=81).

document.getElementById("demo1").innerHTML = y();
document.getElementById("demo2").innerHTML = x2();

<p id="demo1">0</p>
<p id="demo2">0</p>