1

我有一个适用于我的“地图”功能的代码片段 - 以下是代码： 

var latlang = new google.maps.LatLng(myjsonobject[pos].geocode.latitude, myjsonobject[pos].geocode.longitude);

$('#map_canvas').gmap({
    'center': latlang, 
    'zoom': 10, 
    'disableDefaultUI':false, 
    'callback': function() {
        var self = this;                         
        self
            .addMarker({'position': this.get('map').getCenter() })
            .click(function() {
                self.openInfoWindow({ 'content': address }, this);
            });                         
    }
});

该变量latlang提供给定位置的纬度和经度。然后，map_canvas是显示 Google 地图的 div，latlang其输入为 。在回调函数中，self是一个分配有 的变量this。这是我困惑的地方。this在这种情况下是什么？getCenter()任何人都可以在this里面放一些灯self.openInfoWindow吗？

整个代码如何工作并向我显示结果？

4

4 回答 4

2

'this' 是上下文$('#map_canvas')

map_canvas 的整个 DOM 树存储在 'this' 变量中

于 2013-10-23T07:04:35.643 回答
1 
$('#map_canvas').gmap({'center': latlang, 'zoom': 10, 'disableDefaultUI':false, 
'callback': function(   event   ) {
           var self = this;     
...

当您在该函数中捕获事件时，这将（总是？！）相当于

$(event.currentTarget)[0]
于 2013-10-23T07:09:52.707 回答
1

Javascript具有函数范围。
这实际上意味着每个函数内部都this指的是不同的东西。
如果您想在另一个函数中访问某个范围，一种常见的方法是将所需的上下文 ( this) 存储在另一个变量中（例如self因为它的命名暗示了它的值）。
这是一个简单的演示，可以解决这个问题： 

function a() {
    this.someValue = 'some value';
    var self = this;

    function b() {
        alert(this.someValue); // it's undefined, because "this" 
                               // refers to function b's context

        alert(self.someValue); // this works as expected, because self 
                               // is a reference to a's context
    }

    // call b(), to actually test this
    b();
} 
a();

为了简化您的代码并使其更具可读性，让我们将函数分开并命名。所以你的旧代码： 

$('#map_canvas').gmap({
    'center': latlang, 
    'zoom': 10, 
    'disableDefaultUI':false, 
    'callback': function() {
        var self = this;                         
        self
            .addMarker({'position': this.get('map').getCenter() })
            .click(function() {
                self.openInfoWindow({ 'content': address }, this);
            });                         
    }
});

变成： 

$('#map_canvas').gmap({
    'center': latlang, 
    'zoom': 10, 
    'disableDefaultUI':false, 
    'callback': callback
});

function callback() {
    var self = this;  

    this
        .addMarker({'position': this.get('map').getCenter() })
        .click(onClick);    
}

function onClick() {
    // self is callback's context
    // which actually points to the map instance

    // this points to the context of the click function, 
    // which actually is the dom element that was clicked on, 
    // which is the marker
    self.openInfoWindow({ 'content': address }, this);
}
于 2013-10-23T07:14:11.647 回答
0

当您在自己的 jQuery 函数中时，“this”是一个 jQuery 对象。

于 2013-10-23T07:05:36.307 回答