Warum ist JavaScript bind() erforderlich?

Das problem in Beispiel 1 ist 'dies' unter Bezugnahme auf die globalen Namen statt der MeinName Objekt.

Verstehe ich die Verwendung von bind() in der Einstellung der Wert dieser auf ein bestimmtes Objekt, so löst es das problem in Beispiel 1, aber warum tritt dieses problem in Erster Linie? Ist es nur die Art, wie Javascript erstellt wurde?

Ich bin auch gefragt, warum Beispiel 3 löst das Problem und der Unterschied zwischen Beispiel 2 und 3.

JS:

this.name = "John"

var myName = {
  name: "Tom",
  getName: function() {
    return this.name
  }
}

var storeMyName = myName.getName; //example 1
var storeMyName2 = myName.getName.bind(myName); //example 2
var storeMyName3 = myName.getName(); //example 3

console.log("example 1: " + storeMyName()); //doesn't work
console.log("example 2: " + storeMyName2()); //works
console.log("example 3: " + storeMyName3); //works

InformationsquelleAutor Tom | 2016-12-30
  1. 60

    Warum ist JavaScript bind() nötig?

    Den Wert this ist bestimmt durch wie eine Funktion ist genannt. Wenn es Sie, der die Funktion aufruft, dann gibt es normalerweise keine Notwendigkeit für die Verwendung .bind, da haben Sie die Kontrolle über wie Sie die Funktion aufrufen, und daher seine this Wert.

    Allerdings ist es oft nicht Sie, wer die Funktion aufruft. Funktionen übergeben werden, um andere Funktionen als callbacks und event-Handler. Sie sind aufgerufen, durch anderen - code und Sie haben keine Kontrolle über wie die Funktion aufgerufen wird, und deshalb nicht kontrollieren kann, was this verwiesen werden.

    Wenn Ihre Funktion erfordert this werden auf einen bestimmten Wert gesetzt und Sie sind nicht die, die die Funktion aufrufen, müssen Sie .bind die Funktion zu einer bestimmten this Wert.

    In anderen Worten: .bind können Sie den Wert des this ohne den Aufruf der Funktion jetzt.

    Hier ist der Vergleich mit Bezug auf/Aufruf von Funktionen:

                        +-------------------+-------------------+
                    |                   |                   |
                    |      time of      |       time of     |
                    |function execution |    this binding   |
                    |                   |                   |
+-------------------+-------------------+-------------------+
|                   |                   |                   |
|  function object  |      future       |      future       |
|         f         |                   |                   |
|                   |                   |                   |
+-------------------+-------------------+-------------------+
|                   |                   |                   |
|   function call   |       now         |        now        |
|        f()        |                   |                   |
|                   |                   |                   |
+-------------------+-------------------+-------------------+
|                   |                   |                   |
|     f.call()      |       now         |        now        |
|     f.apply()     |                   |                   |
|                   |                   |                   |
+-------------------+-------------------+-------------------+
|                   |                   |                   |
|     f.bind()      |      future       |        now        |
|                   |                   |                   |
+-------------------+-------------------+-------------------+

    Ich bin auch gefragt, warum Beispiel 3 löst das Problem und der Unterschied zwischen Beispiel 2 und 3.

    Beispiel 1/2 und 3 könnten nicht unterschiedlicher sein. storeMyName und storeMyName2 enthalten Funktionen, die aufgerufen werden, in der Zukunft, in der Erwägung, dass storeMyName3 enthält das Ergebnis des Aufrufs myName.getName() in diesem moment.

    Weiteren lesestoff:

    • vielen Dank für deine Hilfe und die Ressourcen. Ich bin neu in javascript und die Antwort ist sehr offensichtlich für mich. So rufen Sie die()/apply() ist das gleiche wie Beispiel 3, mit der Ausnahme verwendet, wenn die getName () - Methode wird vom Objekt getrennt?
    • Im Grunde ja. Wenn eine Funktion eine Eigenschaft eines Objekts, dann die Funktion aufrufen, als myName.getName() wird implizit gesetzt this zu myName. Es entspricht myName.getName.call(myName).
    InformationsquelleAutor Felix Kling
  2. 6

    Den bind() - Methode erstellt eine neue Funktion, die, wenn Sie aufgerufen wird, hat seine diese keyword-set, um die angegebenen Werte aus, die mit einer bestimmten Abfolge von Argumenten vor einer zur Verfügung gestellt, wenn die neue Funktion aufgerufen wird.

    Also, wenn Sie ausführen var storeMyName = myName.getName; der ersten Zeit, die es dauert, den globalen name ( dies.name = "John" )

    Wenn Sie bind() Funktion, es beginnt bezogen auf die definierten Namen in der aktuellen Schließung ( myName in diesem Fall ) und daher druckt Tom

    Dritten mal, seit dem die Funktion aufgerufen wird sofort der Anwendungsbereich der Verordnung ist es, innerhalb Ihrer eigenen lokalen Objekt-und damit druckt den Wert mit der Schließung Tom

    InformationsquelleAutor mrid
  3. 0

    Binden ist der Mechanismus, die Sie ändern können, den Kontext(hier Ihr Standard-Kontext ist global) der Ausführung.

    Basierend auf deinem Beispiel - 

    var storeMyName = myName.getName;

    Zeile von oben ist, die Sie ausführen storeMyName Funktion im globalen Kontext, so dass für diese Ausführung this.name werden top-line(d.h. die globalen /die "John").

    var storeMyName2 = myName.getName.bind(myName);

    Zur obigen Zeile, die Sie sind Explizit ändern der Kontext der Ausführung für storeMyName2 Funktion(indem ich sagte, ich will nicht zum ausführen dieser Funktion als Globale Funktion möchte ich diese Funktion ausführen und im Kontext der myName Objekt, also in diesem Fall this.name wird "Tom")

    var storeMyName3 = myName.getName(); //example 3

    Und für diese oben genannte Zeile, die Sie gerade ausgeführten Funktion auf myName Objekt-Kontext noch wichtiger: Sie sind nicht die Ausführung der storeMyName3 - und das ist, warum Ihr Kontext ist nicht global.

    InformationsquelleAutor Dhruv
  4. 0

    Einer Analogie, die ich mag, die ich noch nie irgendwo gesehen:
    Lassen Sie sagen, Sie haben ein foo-Objekt mit einer bar Funktion.
    Wenn Sie verbindlich sind die bar-Funktion einer anderen variable (oder indem er als eine Funktion der parameter, die häufiger Fall mit callbacks), Sie sind nicht verbindlich/übergeben der Funktion mit seinen einschließenden Objekts, sondern nur die "nude" - Funktion.
    Also mit dem "nude" - Funktion this bedeutet das Globale Objekt.

    Einer kleinen demo

    var foo = "global foo"; //foo set on the global object
var a = {foo : "object foo", bar : function(){return this.foo;}};
var bound = a.bar;
console.log(bound());//returns "global foo", not "object foo"

    bound nur function(){return this.foo;}

    InformationsquelleAutor Vincent J
Schreibe einen Kommentar