JavaScriptとjQueryのは、 "これは" anonymosの内側に、私はこのコードを持って

Question

機能します。

問題はconsole.log(this.url)がundefinedを印刷したということでしたので、私はこのように見えるコードを作り直し：私は問題はインスタンスの値としてthisを取っていない閉鎖していたことを知っている

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

が、限り、私はそれにバインドされたインスタンスではなくundefinedの、windowオブジェクトを参照する必要があります持っていない関数の内部thisへの参照を知っているように、少なくともそれはそこにブラウザの多くのケースです。

私のコードではどういうことが起こっているのですか？

注：私はjQueryのを使用していますし、this.elementsがすでに定義されています。

編集：今$.eachはので、私のコールバックは$.eachから呼び出されている、非インスタンス関数であることを考え出すイムそれはまだそれについて考えthisへの参照、windowでなければなりません。

Answer 1

コールバック関数をhigher-order function（この場合は$.each）に設定すると、コールバックが実行されるときに上位の関数がthisの値を決定できます。この動作を制御する方法はありません。thisを使用しないでください（例：instanceのような参照を使用するか、クロージャを使用）。

$.eachのような高階関数は、コールバックのthisコンテキストを設定する方法を理解するために、状況設定機能Function.callとFunction.applyをチェックしてください。それらのMDNページを読んだら、いくつかのことをクリアするかもしれません。

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

そして、それを使用する：：Array.forEachWithContextはArray.forEachに似て

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

私の例

は、ここでは簡単な例です。ただし、これらのコールバックの実行中にthisの値として使用されるコールバックとの第2引数が必要です。

Answer 2

$.proxyがthisが、私は問題は上にあったことを知っているあなたのPageList ...

Answer 3

を参照することが保証されます

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

...このような$.proxyであなたの$.each機能をラップしてみクロージャは、インスタンスの値としてこれを取っていませんが、限り、私はこの内部の参照は、それにバインドされていない関数を参照する必要がありますウィンドウオブジェクトを参照する必要があります、定義されていない、そこの多くのブラウザではそうです。

thiswindowです。定義されていないwindow.urlを印刷しています。試してconsole.log(this)、それはwindowをもたらすはずです。 [現在の要素の]

値もthisキーワードを介してアクセスすることができます... JavaScriptで

、ときに手：$.eachためjQuery docsによると