javascript对象中未定义函数

Function not defined in javascript object

本文关键字：函数 未定义 对象 javascript      更新时间：2023-09-26

我正试图使用回调和面向对象的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:未定义初始化

为什么会发生这种情况？

主要问题是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));
}

关于this在JavaScript中的更多信息，请访问我的博客：

  • 神话般的方法
  • 你必须记住this
相关文章：