Question

星期五，也许我不清楚，但是 - 我有以下代码：

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);
    }
}

比我使用

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

，输出为：

Object { lat: 50.0575, lng: 19.9802 }
null

为什么第二个日志返回null值？我应该适当地使用课程而不是坚持旧的模式，但我仍然想知道为什么它不起作用。这个分配本身有问题吗？

编辑：我在这里更新了小提琴：https://jsfiddle.net/t1jdxmb8/1/ 这应该已经修复了在回调范围内运行它，但它不起作用

Answer 1

因为this内的getCurrentPosition指向窗口对象而不是地图对象。

拥有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/

下面是一个工作小提琴，一个模拟的小提琴：

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

Answer 2

在回调函数中设置this.myLatLng时，会丢失对象的上下文属性。因此，您应该将此变量存储到某个局部变量（closures in javascript）。

＆＃13;

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);
    }
}

＆＃13;

JavaScript对象方法返回null属性

2 个答案: