0

重複の可能性:
this コンテキストをイベント ハンドラーに渡すにはどうすればよいですか?

私は Javascript 関連の割り当てを行っており、特定の入力に関連付けられたカレンダーを作成する必要があります。

カレンダーは常に表示され、非表示にはなりません。

異なるテキスト フィールドを指す複数のカレンダーが存在する場合があります。

現在、各カレンダーは Javascript オブジェクトによって作成されています。

var cal1=new Calendar("inputfield_id");

カレンダー オブジェクトには、カレンダーがクリックされたときにアクセスしたい特定の変数があります。

基本的に、私の質問は、onclick イベントの特定のオブジェクトを取得する方法、つまり、オブジェクトにいるときに「this」変数を取得する方法があるかどうかです。

私がやろうとしていることを説明するコードのごく一部を次に示します。

function calendar(id){
   this.date=new Date();
   this.id=id;
   this.next_year=function(){
        this.date.setFullYear(this.date.getFullYear()+1);
        alert(this.date); // basically I want to get object context here to change date
   }

   var temp_but=document.createElement("button").onclick=this.next_year;
   document.getElementById(id+"_div").appendChild(temp_but);
   document.getElementById(id+"_div").lastChild.onclick=this.next_year;

}

基本的に、this.nextyear機能では、オブジェクトコンテキストを取得して日付を取得し、それに応じてカレンダーを変更したいと考えています。

4

1 に答える 1

4

これがあなたがやろうとしていることだと思います...

function calendar(id){
   this.date=new Date();
   this.id=id;
   var context = this;
   this.next_year=function(){
        context.date.setFullYear(context.date.getFullYear()+1);
        alert(context.date);//basically i want to get object context here to change date
   }

   var temp_but=document.createElement("button").onclick=this.next_year;
   document.getElementById(id+"_div").appendChild(temp_but);
   document.getElementById(id+"_div").lastChild.onclick=this.next_year;

}

this基本的に、 calledへの参照を保持するためにクロージャーを使用していますcontext。this.next_yearは、 を介してカレンダー オブジェクトへの参照を持つようになりましたcontext。

編集:投稿されたコメントOPに対応する小さなJSレッスン。

関数をコンストラクター (つまり ) として呼び出すと、新しい空のオブジェクトが作成され、新しい空のオブジェクトのコンテキストで関数が実行されます。new calendar("example")

注: 実際には単なる空のオブジェクトではありません。これは、プロトタイプの継承などのために舞台裏で特定の内部ポインターを持つ空のオブジェクトです。

だれでも！関数全体で、 this への参照は現在のコンテキストを参照します。また、関数をコンストラクタとして使用すると、新しく作成されたオブジェクトのコンテキストで関数が呼び出されるため、 を使用してオブジェクトのプロパティを設定できますthis.someProperty。

ステートメントを実行するvar cal1=new calendar("inputfield_id");と、新しいオブジェクトが作成calendarされ、そのオブジェクトのコンテキストで関数が実行されます。そのため、新しいカレンダー オブジェクトの プロパティと プロパティをthis.date=new Date();設定this.id=idしていdateます。id

ここで何が起こっているのかを実際に理解するのに苦労しているのではなく、キーワードが で機能しなかっthis.id=id;た理由を理解していると思います。thisthis.next_year

それが機能するシナリオから始めましょう。を呼び出す場合は、 のコンテキストでcal1.next_year();呼び出すことになるため、予想どおり の日付プロパティが 1 年ずつ増加します。next_year()cal1this.date.setFullYear(this.date.getFullYear()+1);cal1

イベントハンドラーを設定すると、「「クリック」イベントが発生したときではなく、「「クリック」イベントが発生したときにこの関数を実行する」と言ってしまうため、クリックイベントハンドラーでは機能しませんでした。、このステートメントを実行します"。

実際に実行されている関数は次のとおりです。

   function(){
        this.date.setFullYear(this.date.getFullYear()+1);
        alert(this.date);
   }

実行することを期待していたステートメントは次のとおりです。

   this.next_year(); //where this refers to the calendar object.

このコードが実行されると、

elem.onclick = this.next_year;

と言っているのと同じです。

elem.onclick = function(){
    this.date.setFullYear(this.date.getFullYear()+1);
    alert(this.date);
}

これで問題が十分に明確にならない場合は、もう少し進んで、elemを使用してクリック ハンドラを設定した後に要素 がクリックされたときに実際に何が起こるかを説明しますelem.onclick=this.next_year;。ブラウザが を呼び出しているかのように考えるのが好きですelem.onclick([Event event]);。基本的に、使用して設定した関数elem.onclick=は のコンテキストで実行されelem、Eventオブジェクトが最初で唯一の引数として渡されます。

露骨に明確にしてポイントを家に追いやるためthisに、関数のキーワードは、イベントハンドラーとしてブラウザーによって呼び出されたときにクリックされた要素を指します。

   function(){
        this.date.setFullYear(this.date.getFullYear()+1);
        alert(this.date);
   }

説明が過剰で、繰り返し/冗長であることをお詫びします。私は一般的に物事を説明するのが苦手なので、答えを短くするようにしています :P

PS - 受け入れることを忘れないでください!

于 2012-10-14T06:46:56.710 に答える