JavaScript-Objekt-Methode gibt null Eigenschaft

Question

Es ist Freitag, also vielleicht glaube ich nicht klar, aber - ich habe folgenden Code:

var map = { 
    myLatLng: null, 
    init: function(){ 
     navigator.geolocation.getCurrentPosition(function (position) { 
      this.myLatLng = {lat: position.coords.latitude, lng: position.coords.longitude}; 
      console.log(this.myLatLng); 
     }); 
    }, 
    drawRouteTo: function(destination){ 
     console.log(this.myLatLng); 
    } 
} 

als ich

map.init(); 
//and after some time - on click event 
map.drawRouteTo("some address"); 

verwenden und die Ausgabe :

Object { lat: 50.0575, lng: 19.9802 } 
null 

Warum gibt das zweite Protokoll Nullwert zurück? Ich sollte Klassen benutzen und nicht bei den alten Mustern bleiben, aber ich frage mich immer noch, warum es nicht funktioniert. Stimmt es nicht mit der Zuweisung selbst?

EDIT: Ich aktualisierte Geige hier: https://jsfiddle.net/t1jdxmb8/1/ Dieses feste soll dies in Rahmen eines Rückrufs läuft, aber es funktioniert nicht entweder

Answer 1

Weil this innerhalb der getCurrentPosition Punkte auf Fensterobjekt anstelle des Kartenobjekt.

Haben Sie einen reference:

init: function(){ 
    var that = this; 
    navigator.geolocation.getCurrentPosition(function (position) { 
     that.myLatLng = {lat: position.coords.latitude, lng: position.coords.longitude}; 
     console.log(that.myLatLng); 
    }); 
}, 

https://jsfiddle.net/t1jdxmb8/

Nachfolgend finden Sie eine Arbeits Geige, ein simuliertes ein:

https://jsfiddle.net/t1jdxmb8/2/

Answer 2

Wenn Sie this.myLatLng in einer Callback-Funktion einstellen, verlieren Sie Kontext Die Objekte sind diese Eigenschaft. Daher sollten Sie diese Variable in eine lokale Variable speichern (closures in javascript).

var map = { 
 
    myLatLng: null, 
 
    init: function(){ 
 
    var that = this; 
 
     navigator.geolocation.getCurrentPosition(function (position) { 
 
      that.myLatLng = {lat: position.coords.latitude, lng: position.coords.longitude}; 
 
      console.log(that.myLatLng); 
 
     }); 
 
    }, 
 
    drawRouteTo: function(destination){ 
 
     console.log(this.myLatLng); 
 
    } 
 
}