Question

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

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点亮吗？

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

Answer 1

'this'是$('#map_canvas')

的上下文

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

中

Answer 2

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

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

$(event.currentTarget)[0]

Answer 3

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

Answer 4

当你进入自己的jQuery函数时，

'this'是一个jQuery对象。

jquery“这个”令人困惑

4 个答案: