5

「yesno」入力ラジオがあります。ユーザーが[はい]をクリックするとyesDivが表示され、ユーザーが[いいえ]をクリックするとnoDivが表示されます。

それを実装するために、オブジェクトmyObjectを作成しました。 

var myObject= {
        init: function(config){
            this.config=config;
            this.config.InputRadio.bind('click',this.config,this.switchDiv);
        },
        switchDiv: function(ev){
                    self=ev.data;
            if ($(this).val()==1){
                self.divYes.hide();
                self.divNo.show();
            }else{
                self.divYes.show();
                self.divNo.hide();
            }
        }
}

myObject.init({
        InputRadio:$("input[name=yesno]"),
        divYes:$("#yesDiv"),
        divNo:$("#noDiv")
});

これは機能します。関数内の「this」のスコープのため、これを使用してメソッド「switchDiv」内のオブジェクトのプロパティを参照することはできません。関連する質問（独自のオブジェクトプロパティの参照）で、 this.configをパラメーターとして送信し、 self=ev.dataを使用するという解決策を見つけました。

しかし、今私の質問は次のとおりです。オブジェクトのメソッドからオブジェクト自体のプロパティにアクセスするときはいつでも、メソッドのパラメーターとしてそれらを渡さなければならないという事実は少し奇妙ではありませんか？それを回避するためにオブジェクトを宣言するより良い方法はありませんか？

4

3 に答える 3

2

を呼び出すときにそれがthis参照されることを確認したい場合は、関数を少し変更することをお勧めします。これを反映するように関数も更新しました。まだ再割り当てする必要がありますが、関数内でのみですmyObjectswitchDivinitswitchDivthisinit

var myObject= {
        init: function(config){
            var _this = this;
            this.config=config;
            this.config.InputRadio.on('change',function(){
                _this.switchDiv(); // now "this" will refer to myObject, not the input
            });
        },
        switchDiv: function(){
            if (this.config.InputRadio.filter(":checked").val() === '1'){
                this.config.divYes.hide();
                this.config.divNo.show();
            }else{
                this.config.divYes.show();
                this.config.divNo.hide();
            }
        }
};

switchDiv呼び出しを無名関数内にラップすることで、のコンテキストをより適切に維持できますthis。

これが実際の動作を示すデモです。

http://jsfiddle.net/VSdAL/

関連する注記として、コールバックまたは他の関数内で使用するために変数selfに割り当てるときに使用することはお勧めしません。、はデフォルトで、のショートカットです。これは、現在のウィンドウを参照するグローバル変数です。を使用して他のコードを台無しにする可能性がある場合は、再割り当てしたくありませんthisselfwindow.selfself

于 2012-07-11T17:21:31.567 に答える
0

ECMAScript 1.5（すべてのブラウザーでサポートされているわけではありません）には、値Function.bindをバインドするメソッドがあります。this

this.config.InputRadio.bind('click', this.switchDiv.bind(this));

これで、バウンドが呼び出されたときthisに常に参照され、イベントデータを渡す代わりに直接使用できます。myObjectswitchDivthis.config

于 2012-07-11T17:07:04.273 に答える
0

オブジェクトのパブリックAPIが必要でない限り、そのようなオブジェクトをまったく作成しないのが最善だと思います。このフィドルのように、すべての状態を非表示のスコープに保持します

var createYesNoToggler = function(radioName, yesId, noId) {
    var divYes = $("#" + yesId), divNo = $("#" + noId),
        radios = $("input[name=" + radioName + "]");
    radios.click(function() {
        if ($(this).val() === "1") {
            divYes.show();
            divNo.hide();
        } else {
            divYes.hide();
            divNo.show();
        }
    });
};

createYesNoToggler("yesno", "yesDiv", "noDiv");

または、1つだけが必要な場合は、関数を公開しないでください。

(function(radioName, yesId, noId) {
    var divYes = $("#" + yesId), divNo = $("#" + noId),
        radios = $("input[name=" + radioName + "]");
    radios.click(function() {
        if ($(this).val() === "1") {
            divYes.show();
            divNo.hide();
        } else {
            divYes.hide();
            divNo.show();
        }
    });
}("yesno", "yesDiv", "noDiv"));

（ただし、後者は、複数必要ない場合は、いくらか簡単な方法で実行される可能性があります。）

于 2012-07-11T18:25:13.803 に答える