javascript - jquery "this" はここで紛らわしい

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_canvasGoogle マップが表示される divです。latlangコールバック関数でselfは、で割り当てられる変数ですthis。これは私が混乱している場所です。thisこの文脈では何ですか？誰か光を当てgetCenter()てthis内部self.openInfoWindowをお願いできますか？

コード全体はどのように機能し、結果を表示していますか?

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

その関数でイベントをキャプチャすると、これは（常に?!）と同等になります

$(event.currentTarget)[0]

score 0 · Accepted Answer

0

'this' は、独自の jQuery 関数内にいる場合の jQuery オブジェクトです。

于 2013-10-23T07:05:36.307 に答える

javascript - jquery "this" はここで紛らわしい

4 に答える 4

Related

Reference