jQuery AJAX コールバック関数、これは問題を指します_javascript のヒント

たとえば、this を含むオブジェクトがグローバル スコープで呼び出された場合、現在のオブジェクトの this は window を指します。 this のポイントを自分の希望に合わせるために、JavaScript では this のポイントを変更するメソッドが 2 つ用意されています。それは call と apply です。もちろん、これを実現するためにクロージャを使用するメソッドもあります。この記事では、例を挙げてこれらの問題を説明します。

まずデモ コードを見てみましょう。このコードはデモのみを目的としており、実用的な意味はありません。

コードをコピー コードは次のとおりです:

//A ソケット接続実質的な意味はありません Object
varソケット =
{
connect: function(host, port)
{
alert('接続中のソケットサーバー,host:' host ',port:' port) ;
}
};
//connect メソッドも AJAX コールバック関数として呼び出されます
function classIm()
{
this.ホスト = '192.168.1.28 ';
this.port = '8080';
this.connect = function(data)
{
socket.connect(this.host, this.port);
};
}
//インスタント メッセージング クラスをインスタンス化します
var IM = new classIm();
//ここでは、ソケット接続を開くために、まず、ユーザーの WEB ログインが成功したことを WEB を通じて知る必要があります。
$.get('CheckWebLogin.aspx', IM.connect);
上記の例を実行すると、ポップアップ ホストとポートが表示されます。これは、コールバック関数の this が IM オブジェクトを指しているのではなく、jQuery の AJAX 設定オブジェクトである ajaxSettings を指しているためです。 jQuery 内部では、実行する受信コールバック関数の代わりに s.success が使用され、success の呼び出しオブジェクトは s です。これは、以下の ajaxSettings オブジェクトの略称です。

ajaxSettings:
{
url: location.href、
global: true、
type: "GET"、
contentType: "application/x-www-form -urlencoded",
processData: true,
async: true
}

これを証明するには、次のようにコードを変更してテストします。URL が表示されます。 , global、type、contentType、その他のオブジェクトの属性名:

コードをコピー コードは次のとおりです:

this .connect = function(data)
{
for (this の var key)
{
alert(key);
}
}

問題を理解したので、それを解決する方法を見つけてみましょう。実際、私たちの目的は、AJAX コールバック関数コードの this が、socket.connect(this.host, this.port) が classIm のインスタンス オブジェクト IM を指していること、または、socket.connect() メソッドが正しい値を取得できることを期待することです。パラメータ値。 AJAX コールバック関数の期待どおりの実行結果を取得するために、次のメソッドを分析しました。

メソッド 1

オブジェクトの正しい参照を、代わりに直接渡します。このポインタ、またはオブジェクト転送と呼ばれます。これは最も一般的なアプローチです。つまり、クラスがインスタンス化されるときに変数を使用して現在のオブジェクトへの参照を保存し、この変数を使用する代わりに後続のメソッドでこの変数を直接使用します。注: このメソッドは、実際にこれが指すものを変更するわけではありません。デモ コードは次のとおりです。前後の 2 つのコードの違いにも注目してください。コードの異なる部分も強調表示します。

コードをコピー コードは次のとおりです:

varソケット =
{
connect: function(host, port)
{
alert('接続中のソケットサーバー,host:' host ',port:' port);
}
}; )
{
var self = this;
this.host = '192.168.1.28';
this.connect = function(data); >{
socket.connect(self.host, self.port);
}
var IM = new classIm(); 、IM.connect);



方法 2

これの方向を実際に変更するには、apply と Closure を使用します。次のメソッドは、関数が呼び出されたときに this オブジェクトを一時変数 _method に格納し、クロージャを使用してそれを返された関数オブジェクトに渡します。返された関数では、apply を使用して呼び出し元オブジェクトの this オブジェクトを置き換えます。ターゲットオブジェクト thisObj 。このメソッドは多くの JavaScript フレームワークで実践されており、以下の Function プロトタイプ メソッドはプロトタイプ フレームワークを私が簡略化したものです。最初にApplyメソッドをFunctionプロトタイプに追加したことに注意してください。このApplyは、私がカスタマイズしたものではありません。必要に応じて、別の名前を付けることができます。


コードをコピー

コードは次のとおりです:

/**
* jQuery AJAX コールバック関数の this ポインターが指すように変更します。
* @param {Object} thisObj 現在の this ポインターを置き換えるオブジェクト
* @return {Function} function(data){}
*/
Function.prototype.Apply = function(thisObj)
{
var _method = this;
return function(data)
{
return _method.apply(thisObj,[data]);
}
}
var ソケット =
{
connect: function(host, port)
{
alert('接続中のソケットサーバー,host:' host ',port:' port);
}
};
function classIm()
{
this.host = ' 192.168.1.28';
this.port = '8080';
this.connect = function(data)
{
socket.connect(this.host, this.port);
}
var IM = new classIm();
$.get('CheckWebLogin.aspx', IM.connect.Apply(IM)); 🎜>方法3

匿名コールバック関数で実際のコールバック処理関数を呼び出します。この方法でも同じ問題は解決できますが、コードが少し長くなり冗長になるため、実際の開発ではお勧めできません。このメソッドは、connect メソッドを呼び出すオブジェクトが依然として IM オブジェクトであることを保証し、これが IM オブジェクトを指していることを保証します。コードは次のとおりです:


コードをコピー

コードは次のとおりです: $.get ('CheckWebLogin.aspx' , function(data){IM.connect(data)});