Javascript "dieser" Zeiger innerhalb der verschachtelten Funktion

In JavaScript die this Objekt ist, basierend auf, wie Sie Ihre Funktionsaufrufe.

Im Allgemeinen gibt es drei Möglichkeiten, um den setup - this Objekt:

1. someThing.someFunction(arg1, arg2, argN)
2. someFunction.call(someThing, arg1, arg2, argN)
3. someFunction.apply(someThing, [arg1, arg2, argN])

In allen obigen Beispielen die this Objekt someThing.
Aufruf einer Funktion ohne führende übergeordnete Objekt in der Regel bekommen Sie die globalen Objekt, das in den meisten Browsern bedeutet das window Objekt.

InformationsquelleAutor der Antwort KylePDavis

Da dies scheint bei den meisten von Ihnen positiv bewertet werden Fragen dieser Art, und lassen Sie mich hinzufügen, nach all den Jahren, die ES6-Lösung mit Pfeil-Funktionen:

var std_obj = {
  ...
  displayMe() {
    ...
    var doSomeEffects = () => {
                        ^^^^^^^    ARROW FUNCTION    
      //In an arrow function, the 'this' pointer is interpreted lexically,
      //so it will refer to the object as desired.
      if (this.activeEffect=="fade") { }
    };
    ...    
  }
};

InformationsquelleAutor der Antwort

, Diese Frage zu verstehen , versuchen, den Ausgang für das folgende snippet

var myObject = {
    foo: "bar",
    func: function() {
        var self = this;
        console.log("outer func:  this.foo = " + this.foo);
        console.log("outer func:  self.foo = " + self.foo);
        (function() {
            console.log("inner func:  this.foo = " + this.foo);
            console.log("inner func:  self.foo = " + self.foo);
        }());
    }
};
myObject.func();

Den obigen code wird die Ausgabe der folgenden auf der Konsole:

outer func:  this.foo = bar
outer func:  self.foo = bar
inner func:  this.foo = undefined
inner func:  self.foo = bar

In der äußeren Funktion, sowohl als auch selbst finden myObject und daher können beide ordnungsgemäß Verweis und Zugriff auf foo.

In der inneren Funktion, aber dies bezieht sich nicht länger auf myObject. Als Ergebnis dieser.foo ist nicht definiert, in der die innere Funktion, in der Erwägung, dass der Verweis auf die lokale variable selbst bleibt im Rahmen und ist zugänglich. (Vor ECMA-5, das in der inneren Funktion beziehen sich auf das Globale window-Objekt; in der Erwägung, dass, als der ECMA-5, das in der inneren Funktion wäre nicht definiert.)

InformationsquelleAutor der Antwort ronakshah725

können Sie es auch durch .bind () - Methode,

var std_obj = {
  options : { rows: 0, cols: 0 },
  activeEffect : "none", 

  displayMe : function() {

    //the 'this' pointer is referring to the std_obj
    if (this.activeEffect=="fade") { }

    var doSomeEffects = function() {

      //now 'this' pointer is referring to the std_obj when calling by bound function
      if (this.activeEffect=="fade") { }
          alert(this.activeEffect);
    }

    var newBoundFunction= doSomeEffects.bind(std_obj);
      newBoundFunction();   
  }
};

wir können tatsächlich setzen Sie den Wert dieses explizit mit call(), bind () und apply() . Die drei sind sich sehr ähnlich, aber es ist wichtig zu verstehen, die geringfügige Unterschiede.

Nennen und Anwenden, sind jeweils aufgerufen, sofort. - Aufruf eine beliebige Anzahl von Parametern: diese, gefolgt von den zusätzlichen Argumente. Gelten, nimmt nur zwei Parameter: dies ist, gefolgt von einer Reihe von zusätzlichen Argumenten.

Folgst du mir noch? Ein Beispiel soll dies verdeutlichen. Betrachten Sie den code unten. Wir versuchen, zahlen zu addieren. Kopieren Sie diesen in Ihren browser-Konsole und rufen Sie die Funktion auf.

function add(c, d) {
  console.log(this.a + this.b + c + d);
}
add(3,4);
//logs => NaN

Die Funktion " add-Protokolle NaN (not a number). Das ist, weil dieser.eine und diese.b nicht definiert sind. Sie nicht existieren. Und Sie können nicht fügen Sie eine Nummer, um etwas, das nicht definiert ist.

Ermöglicht das einführen eines Objekts in die Gleichung mit ein. Wir können mithilfe von call() und apply() zum Aufruf der Funktion mit unseren Objekt:

function add(c, d) {
  console.log(this.a + this.b + c + d);
}
var ten = {a: 1, b: 2};
add.call(ten, 3, 4);
//logs => 10
add.apply(ten, [3,4]);
//logs => 10

Wenn wir hinzufügen.call() der erste parameter ist das, was diese gebunden werden soll. Die nachfolgenden Parameter werden übergeben in der Funktion, die wir aufrufen. So, in der add() , dies.eine bezieht sich auf zehn.eine und diese.b bezieht sich auf zehn.b und wir erhalten 1+2+3+4 zurückgegeben wird, oder 10.

hinzufügen.apply() ist ähnlich. Der erste parameter ist das, was diese gebunden werden soll. Der nachfolgende parameter ist ein array der Argumente, die verwendet werden in der Funktion.

Was Binden? Die Parameter in bind() identisch sind zu nennen (), aber bind() wird nicht aufgerufen, sofort. Stattdessen bind() gibt eine Funktion mit dem Rahmen dieser bereits gebunden. Weil dieses, bind() ist nützlich, wenn wir nicht wissen, alle unsere Argumente vor. Wieder ein Beispiel soll helfen, mit Ihrem Verständnis:

var small = {
  a: 1,
  go: function(b,c,d){
    console.log(this.a+b+c+d);
  }
}
var large = {
  a: 100
}

Kopieren Sie die oben in der Konsole. Dann rufen Sie

small.go(2,3,4);
//logs 1+2+3+4 => 10

Cool. Nichts neues hier. Was aber, wenn wir wollen, dass Sie den Wert des großen.eine statt? Wir können verwenden Sie call/apply:

small.go.call(large,2,3,4);
//logs 100+2+3+4 => 109

Nun, was, wenn wir nicht wissen, alle 3 Argumente noch? Wir können binden:

var bindTest = small.go.bind(large,2);

Wenn wir die Konsole.log-unsere variable vor, bindTest , können wir sehen, woran wir arbeiten mit

console.log(bindTest);
//logs => function (b,c,d){console.log(this.a+b+c+d);}

Denken Sie daran, mit binden einer Funktion zurückgegeben wird, hat bereits diese gebunden! Also unsere diese wurde erfolgreich an unsere großen Objekt. Wir haben auch schon übergeben in unsere zweite argument als die Nummer 2. Später, wenn die restlichen Argumente, die wir weitergeben können, in:

bindTest(3,4);
//logs 100+2+3+4 => 109

Für Klarheit, hier ist der gesamte code zusammen in einem block. Schauen Sie vorbei, und kopieren Sie Sie in Ihre Konsole, um wirklich zu verstehen, was passiert ist!

var small = {
  a: 1,
  go: function(b,c,d){
    console.log(this.a+b+c+d);
  }
}
var large = {
  a: 100
}
small.go(2,3,4);
//logs 1+2+3+4 => 10
var bindTest = small.go.bind(large,2);
console.log(bindTest);
//logs => function (b,c,d){console.log(this.a+b+c+d);}
bindTest(3,4);
//logs 100+2+3+4 => 109

Erinnere mich an ein paar Dinge:

Den Wert dieser ist in der Regel bestimmt durch eine Funktion Ausführungskontext.

Im globalen Bereich, dies bezieht sich auf das Globale Objekt (window-Objekt).

Wenn das new-Schlüsselwort wird verwendet(ein Konstruktor), das gebunden ist an das neue Objekt erzeugt wird.

Wir können den Wert dieses explizit mit call(), bind () und apply().

Pfeil-Funktionen nicht binden diese — statt diese ist gebunden lexikalisch (D. H. basierend auf den original-Kontext)

InformationsquelleAutor der Antwort Hitesh Kansagara