我正在 CoffeeScript 中创建一个库,并使用 Google map 计算票价。
像这样初始化 map 时:
var viewport = document.getElementById('viewport'),
options = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
google.maps.event.addDomListener(window, 'load', function()
{
var map = new google.maps.Map(viewport, options);
});
它按预期加载。
但是当我使用我的库初始化它时:
var viewport = document.getElementById('viewport'),
options = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
},
map = new FareJS.Map(viewport, options);
视口(viewport)保持灰色,移动 map 会出现TypeError: a is undefined
。
经过一番研究,我发现Map
类中的initializeMap
方法中的@opt
的值是未定义的。我觉得这很奇怪,因为我在构造函数中设置了它。更奇怪的是,@viewport
不是未定义...只是@opt
。
有问题的类(class)是
class Map
constructor: (@viewport, @opt) ->
if not window.hasOwnProperty('google')
throw "Google Maps API could not be found, are you sure you installed it?"
@loadMapOnLoad()
initializeMap: () ->
@map = new google.maps.Map(@viewport, @opt)
return
loadMapOnLoad: () ->
google.maps.event.addDomListener(window, 'load', @initializeMap)
return
编译后如下所示:
var Map;
Map = (function() {
function Map(viewport, opt) {
this.viewport = viewport;
this.opt = opt;
if (!window.hasOwnProperty('google')) {
throw "Google Maps API could not be found, are you sure you installed it?";
}
this.loadMapOnLoad();
}
Map.prototype.initializeMap = function() {
this.map = new google.maps.Map(this.viewport, this.opt);
};
Map.prototype.loadMapOnLoad = function() {
google.maps.event.addDomListener(window, 'load', this.initializeMap);
};
return Map;
})();
为什么会这样?我该如何解决它?
最佳答案
问题是 initializeMap
将在类/对象的上下文之外执行。 this
不会引用 initializeMap
中的类实例。您必须执行以下操作之一:
# explicitly bind to @
# https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
google.maps.event.addDomListener window, 'load', @initializeMap.bind @
# preserve context with => and call regularly
google.maps.event.addDomListener window, 'load', => @initializeMap()
# declare method with bound context, so it doesn't matter how you call it
# (resulting behaviour could be considered somewhat unidiomatic for JS, caveat emptor)
class Map
initializeMap: =>
..
关于coffeescript - 构造函数中设置的变量在不同方法中未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29824916/