2011-10-25 4 views
1

CoffeeScript相当の以下のJSコードが生成されています。は `this`がjsonコールバックで見えませんか?

スライダーウィジェットにオブジェクトを追加したいのですが、これらのオブジェクトのプロパティーは、Django REST viewから来ています。空想的ではなく、辞書のリストだけです。

私はCoffeeScriptとDjangoの両方で非常に新しく、thisの可視性を理解していません。

ここでは2つのバージョンのうちの一方が動作し、他方は動作しません。

Slider.prototype.manageObject = function(itemId, colorSequence) { 
    var obj; 
    obj = this; 
    return $.getJSON("http://localhost:8000/api/?item=" + itemId, function(data) { 
    return obj.managed.push([itemId, data]); 
    }); 
}; 

Slider.prototype.manageObject = function(itemId, colorSequence) { 
    return $.getJSON("http://localhost:8000/api/?item=" + itemId, function(data) { 
    return this.managed.push([itemId, data]); 
    }); 
}; 

なぜですか?

答えて

3

問題は、thisの値はコンテキストによって異なります。通常、現在のオブジェクトを参照します.2番目の場合はコールバック関数です。 obj = thisを割り当てることによって、元の参照を変数objに保存しているため、managed.push関数が存在しないコールバック関数の2番目のケースでは、managed.pushが呼び出されます。 this

A本当に素晴らしい説明:http://www.quirksmode.org/js/this.html実施例1でhttp://javascriptweblog.wordpress.com/2010/08/30/understanding-javascripts-this/

0

非同期要求が行われた後にコールバックが呼び出されます。したがって、コールバックは宣言されているスコープとは異なるスコープで呼び出され、thisキーワードは期待していた以外のものを参照します。 obj変数と同じクロージャで定義されているため、関数はその補助変数に格納されている最初のthis値にアクセスできます。

2

this内の変数$.getJSONjQueryを指します。最初にリファレンスを保存する間に、thisobj変数に必要です。それから、単にそれにアクセスしてください。

+コードの3行目にあるthisは、Slider.prototypeを指しています。

+0

みんなありがとうございます。私は理解した2つの答えの中からランダムに1つを受け入れるつもりです。 – mariotomo

0

「これは」)(実施例2のように「この」は$ .getJSONによって実行されるコールバックで呼び出されるスライダー機能を指し関数は$ .getJSON関数を指します。

1

JavaScriptはメソッドと関数の区別がありません。すべて関数は、変数thisを受け取っています。これは、関数を呼び出す方法によって決定されます。自分自身で呼ば

obj.method(args); 
//this inside method will be obj 

機能は、あなたがshouls無用thisを受け取る:ドット「メソッド」の表記を使用して呼び出さ

機能は、適切なオブジェクトへthisセットを持っています使用しないでください。親関数からこれを継承することははるかに便利

getJson(..., function(result){ 
    //we are inside another function now 
    //it has its own useless "this" that shadows the one that you actually want 
}); 

通常workaroudは、オリジナルの「この」に、通常の変数を設定して使用することにより、あなたはもともと何をしたか正確にやっているだろうから、これは間違いなく、設計ミスです代わりに。変数を呼び出すのが一般的です。that

var that = this; 
getJson(..., function(){ 
    that.managed ///... 
}); 
関連する問題