※ ChatGPTを利用し、要約された質問です(原文:JQueryのclick(fnc)で指定された関数中のthis)
JQueryのclick(fnc)で指定された関数中のthis
このQ&Aのポイント
JQueryのclick(fnc)で関数中のthisの扱いについてお尋ねします。下記コードでは仮に2つのクラスをモデルとコントローラとして、コントローラからモデルの関数を呼び出しています。
value="HTML Tag"のボタンは期待したとおりに'chicken crows.'を表示しますが、value="JQuery"のボタンはcrow()中のthis.modelがundifinedになってしまいます。
後者では$.fn.controllers.chickenController.crowをinputタグにコピーしてそれを実行しているのではないかと思います。そのためかthisはHTML Inputを指します。thisを使用する以外にモデルのcrow()を実行する方法はありませんでしょうか?
JQueryのclick(fnc)で指定された関数中のthis
JQueryのclick(fnc)で関数中のthisの扱いについてお尋ねします。
下記コードでは仮に2つのクラスをモデルとコントローラとして、コントローラからモデルの関数を呼び出しています。value="HTML Tag"のボタンは期待したとおりに'chicken crows.'を表示しますが、value="JQuery"のボタンはcrow()中のthis.modelがundifinedになってしまいます。後者では$.fn.controllers.chickenController.crowをinputタグにコピーしてそれを実行しているのではないかと思います。そのためかthisはHTML Inputを指します。
thisを使用する以外にモデルのcrow()を実行する方法はありませんでしょうか?条件としてはモデルとコントローラのオブジェクトのペアは複数有りうり、コンストラクタやプロトタイプ中で一意の変数を定義できない点にご注意ください。
<script tyoe="text/javascript" src="jquery-1.3.2.min.js" ></script>
<script type="text/javascript">
$(function(){
//名前空間
$.fn.models = new Object();
var models = $.fn.models;
// コンストラクタ
models.bird = function(type){this.type = type;}
// インスタンスメソッド
models.bird.prototype = {
crow: function(){ alert(this.type + ' crowed.');}
}
var chicken = new models.bird('chicken');
//名前空間
$.fn.controllers = new Object();
var controllers = $.fn.controllers;
// コンストラクタ
controllers.birdController = function(model){this.model = model;}
// インスタンスメソッド
controllers.birdController.prototype = {
crow: function(){
this.model.crow(); // JQuryの場合thisはHTML Inputを指します。
}
}
$.fn.controllers.chickenController = new controllers.birdController(chicken);
$('#b').click($.fn.controllers.chickenController.crow);
});
</script>
<html>
<body>
<input type="button" onclick="$.fn.controllers.chickenController.crow();" value="HTML Tag" />
<input type="button" id="b" value="JQuery" />
</body>
</html>
お礼
ありがとうございます。ご指摘のとおり無名関数を使用したら動作しました。助かりました。 $(#b).click(fnc)で指定した場合、下記のようなことが行われていると解釈しましたが、正しいでしょうか? ○動作した場合、HTMLInput.onclick = function(){return function(){$.fn.controllers.chickenController.crow();}} ×動作しない場合、HTMLInput.onclick = function(){return $.fn.controllers.chickenController.crow; } だとすればonclick='alert(this);'はHTMLInput.onclick = function(){return alert(this);} であり、'object HTMLInputelement'を表示するのも筋が通っています。