jquery“this”在这里令人困惑答案

【问题标题】：jquery "this" is confusing herejquery“this”在这里令人困惑
【发布时间】：2013-10-23 07:02:23
【问题描述】：

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

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() 和self.openInfoWindow 中的this 有所了解吗？

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

【问题讨论】：

见：stackoverflow.com/questions/13441307/…。具体来说，这是在 onclick 处理程序的上下文中，因此请查看规则 4。但是 jQuery 也可以更改 this 的内容，因此请查看 jQuery 文档。
感谢您的回复... 该代码正在我的 HTML5 移动应用程序中使用，其中显示了一组地址作为结果，当我单击一个地址时，将显示该地址的地图。所有这些仅适用于第一次（第一次地址点击）。即如果我接下来选择一个新地址，地图仍然显示旧地址及其位置:(

标签： javascript jquery google-maps

【解决方案1】：

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

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

【讨论】：

感谢您的回复...所有这些都是第一次正常工作。该代码正在我的 HTML5 移动应用程序中使用，其中显示了一组地址作为结果，当我单击一个地址时，会显示该地址的地图。所有这些仅适用于第一次（第一次地址点击）。即如果我接下来选择一个新地址，地图仍然显示旧地址及其位置:(

【解决方案2】：

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);
}

【讨论】：

感谢您的回复... 该代码正在我的 HTML5 移动应用程序中使用，其中显示了一组地址作为结果，当我单击一个地址时，将显示该地址的地图。所有这些仅适用于第一次（第一次地址点击）。即如果我接下来选择一个新地址，地图仍然显示旧地址及其位置:(
在我的代码中，当我提醒“self”时，它会显示 [object, object]。 “latlang”正在更新（使用任何新地址的 lat、lang 坐标），但这并没有反映在“addmarker”中……它总是显示我的第一个地址！ :(
请查看完整（更新）答案。也许它会帮助你更好地理解这个问题:)
当然。这应该真的有帮助。我在这里经历了一个类似的帖子 - stackoverflow.com/questions/7701077/…

【解决方案3】：

$('#map_canvas').gmap({'center': latlang, 'zoom': 10, 'disableDefaultUI':false, 
'callback': function(   event   ) {
           var self = this;     
...

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

$(event.currentTarget)[0]

【讨论】：

【解决方案4】：

当您在自己的 jQuery 函数中时，

'this' 是一个 jQuery 对象。

【讨论】：