Wie äußere Element

Question

Bei folgenden JavaScript-Code verweisen:

({ 
    foo: 1, 
    bar: 2, 
    zoo: 3, 
    test: function(i) { 
    var g = function(i) { 
     alert(i + zoo); 
    } 
    g(i); 
    } 
}).test(2); 

Warum zoo in alert() nicht definiert ist? Welche Syntax kann ich verwenden, um korrekt auf zoo Bezug zu nehmen und Alarmanzeige für den Wert 5 zu erhalten?

Update: Ich würde Lösung bevorzugen, wo nur die Umsetzung von g ändern muss, wenn überhaupt möglich.

Answer 1

zoo ist keine frei schwebende Variable, sondern eine Eigenschaft des Objekts. Innerhalb test können Sie das Objekt unter Verwendung this verweisen (wegen der Art, wie Sie es nennen). Innerhalb g wird der this Zusammenhang allerdings verloren, so müssen Sie es explizit erhalten:

test: function(i) { 
    var g = function(i) { 
     alert(i + this.zoo); 
    }.bind(this); 
    g(i); 
} 

oder:

test: function(i) { 
    var g = function(i) { 
     alert(i + this.zoo); 
    }; 
    g.call(this, i); 
} 

Answer 2

Wenn Sie eine Elementfunktion eines Objekts aufrufen, wird das this Schlüsselwort auf das Objekt (außer Sie rufen die Funktion mit .call oder .apply auf). Die Funktion g ist nicht mehr Mitglied des Objekts, daher wird this nicht auf das Objekt gesetzt. Sie haben ein paar Optionen, wenn Sie weiterhin die g-Funktion verwenden möchten.

einen Verweis auf this Set:

test: function(i) { 
    var that = this; 
    var g = function(i) { 
     alert(i + that.zoo); 
    } 
    g(i); 
} 

oder manuell eingestellt werden, den Wert this von .call

test: function(i) { 
    var g = function(i) { 
     alert(i + this.zoo); 
    } 
    g.call(this, i); 
} 

hier ein wenig mehr Informationen über .call und .apply verwenden.

Answer 3

Wie wäre:

({ 
     foo: 1, 
     bar: 2, 
     zoo: 3, 
     test: function(i) { 
     var g = function(_this,i) { 
      alert(i + _this.zoo); 
     } 
     g(this,i); 
     } 
    }).test(2); 

Answer 4

einen Pfeil Funktion wird die „außen“ Wert von this, zu bewahren und es verwenden, um den Wert von zoo Eigenschaft zuzugreifen:

({ 
    foo: 1, 
    bar: 2, 
    zoo: 3, 
    test: function(i) { 
    var g = i => alert(i + this.zoo); 
    g(i); 
    } 
}).test(2);