更好的设计,以便从对象的方法引用自己的对象的属性

Question

我有一个'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")
});

这有效,我知道我不能用它来引用方法'switchDiv'中的对象属性,因为函数内部有'this'的范围.我找到了将this.config作为参数发送然后在相关问题(引用自己的对象属性)中使用self = ev.data的解决方案.

但现在我的问题是:每当我想从该对象的方法访问对象自己的属性时,我必须将它们作为方法中的参数传递,这一点并不奇怪吗？是不是有更好的方法来声明对象以避免这种情况？

Answer 1

除非您需要对象的公共 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");

或者，如果您只需要一个，那么甚至不要公开该函数：

(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"));

（但如果您不需要多个方法，则后者可能会以更简单的方式完成。）