Question

我尝试使用回调和面向对象的javascript处理google api来调用方法，但是我一直在调用函数时遇到一个未定义的错误。

JS：

var generateMap = (function(){
var map;
return{
    offsetCenter: function(lat, lng){
        lat = lat;
        lng = lng + .01;

        return new google.maps.LatLng(lat, lng);
    }

    ,initialize: function(location){
        console.log("test");
        var latLng = new google.maps.LatLng(location.coords.latitude, location.coords.longitude);

        var mapOptions = {
            zoom: 15,
            center: latLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true,
            draggable: false,
            scaleControl: false,
            scrollwheel: false
        };

        map = new google.maps.Map(document.getElementById('map'), mapOptions);
        var newCenter = offsetCenter(location.coords.latitude, location.coords.longitude);
        map.setCenter(newCenter);

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(location.coords.latitude, location.coords.longitude),
            title: 'Point A',
            map: map,
            draggable: false
        });
    }

    ,createMap: function(){
        navigator.geolocation.getCurrentPosition(initialize);
    }
};
})();
$(document).ready(function(){
    var callbacks = $.Callbacks();
    callbacks.add(
        generateMap.createMap
    );
    callbacks.fire();
})

错误：ReferenceError：未定义initialize

为什么会发生这种情况？

Answer 1

主要问题是createMap是指未定义的符号：

,createMap: function(){
    navigator.geolocation.getCurrentPosition(initialize);
    // Here ---------------------------------^
}

与Java或C＃不同，JavaScript对当前实例上的方法没有隐含this。你必须指定它。

现在，因为generateMap是单身，initialize并未在任何地方使用this，所以您可以这样更正：

,createMap: function(){
    navigator.geolocation.getCurrentPosition(generateMap.initialize);
}

同样，这只有效，因为generateMap是单身，initialize不使用this。

在一般情况下（如果它不是单身，或initialize使用this），您管理this：

此代码：

callbacks.add(
    generateMap.createMap
);

...会将createMap函数的引用添加到回调列表中，但该函数不会以任何方式绑定到generateMap对象。所以，当它被调用时，this不会引用generateMap（除了关闭它，但是再次，我们在这里假设我们不会处理用单身人士）。您可以使用ES5的Function#bind或jQuery $.proxy解决这个问题：

callbacks.add(
    generateMap.createMap.bind(generateMap)
);
// or
callbacks.add(
    $.proxy(generateMap.createMap, generateMap)
);

每个人都会创建一个功能，在通话时会转身并在通话过程中拨打createMap拨打this = generateMap。

然后在createMap中，我们以类似的方式解决initialize事情：

,createMap: function(){
    navigator.geolocation.getCurrentPosition(this.initialize.bind(this));
}
// or
,createMap: function(){
    navigator.geolocation.getCurrentPosition($.proxy(this.initialize, this));
}

有关我博客中JavaScript的this的更多信息：

函数未在javascript对象中定义

1 个答案: