1

私はこのコードを持っています:

PageList: function(url, index, classes){
    this.url = url;
    this.index = index;
    ...
};

PageList.prototype.toHTML = function(){
    var div = $('<div class="container"></div>');
    var p = $('<p></p>');
    var link = $('<a></a>');
    $.each(this.elements, function(index, array_value){
          console.log(this.url);
          ...
    }
}

そして、それは期待どおりに機能しました。

問題はそれconsole.log(this.url)が印刷されていたことだっundefinedたので、コードを次のように作り直しました。

PageList.prototype.toHTML = function(){
    var div = $('<div class="container"></div>');
    var p = $('<p></p>');
    var link = $('<a></a>');
    var instance = this;
    $.each(this.elements, function(index, array_value){
               console.log(instance.url);
        }
}

問題はクロージャーがthisインスタンスの値としてとらないことにあることは知っていますが、私が知る限りthis、インスタンスがバインドされていない関数内への参照は、ではなく、ウィンドウ オブジェクトを参照する必要がありますundefined。少なくとも、世の中の多くのブラウザではそうです。

それで、私のコードで正確に何が起こっているのですか。

注: jQuery を使用しており、this.elements既に定義されています。

編集：それ$.eachが非インスタンス関数であることを理解しているので、コールバックはから呼び出されていますが、それはへの参照$.eachである必要があり、まだ考えています。windowthis

4

3 に答える 3

3

のjQueryドキュメントによると$.each：

[現在の要素の]値には、thisキーワードを介してアクセスすることもできます...

JavaScript では、コールバック関数を高階関数(この場合は$.each) に渡すと、高階関数は、コールバックが実行されたときに の値がどうなるかを決定できthisます。この動作を制御する方法はありません-単に使用しないでくださいthis（たとえば、例のような参照を使用するinstanceか、クロージャーを介して）。

コンテキスト設定関数Function.callを調べて、Function.apply高階関数がコールバック$.eachのコンテキストを設定する方法を理解してください。thisこれらの MDN ページを読むと、いくつかのことが明らかになるかもしれません。

簡単な例を次に示します。

Array.prototype.forEachWithContext(callback, this_in_callback) {
    for(var i = 0; i < this.length; ++i) {
        callback.call(this_in_callback, i, this[i]);
    }
}

そしてそれを使用するには：

PageList.prototype.toHTML = function(){
    //...
    this.elements.forEachWithCallback(function(index, array_value){ ... }, this);
}

私の例Array.forEachWithContextは に似ていArray.forEachます。ただし、コールバックと、実行中にこれらの各コールバックの値として使用される 2 番目の引数を取りthisます。

于 2012-05-01T04:50:11.570 に答える
1

問題はこれをインスタンスの値としてとらないクロージャーにあることは知っていますが、私が知る限り、インスタンスがバインドされていない関数内の this への参照は、代わりにウィンドウオブジェクトを参照する必要があります少なくとも、多くのブラウザではそうです。

this です window。window.url未定義の を印刷しています。試してみるconsole.log(this)と、結果が得られるはずwindowです。

于 2012-05-01T04:29:17.117 に答える
1

$.each関数を次のようにラップしてみてください$.proxy...

$.each(this.elements, $.proxy(function(index, array_value){
    console.log(this.url);
},this));

は、あなたの参照$.proxyを確実にします...thisPageList

于 2012-05-01T04:12:59.687 に答える