javascript - JavaScript 对象中未定义函数

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:初始化未定义

有什么原因会发生这种情况吗？

Answer 1

主要问题是 createMap 引用了一个 undefined symbol :

,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 函数的引用添加到回调列表中，但该函数不会以任何方式绑定(bind)到 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 的更多信息，请访问我的博客:

• Mythical methods
• You must remember this