5

我有一个“yesno”输入收音机。当用户单击yes时，将显示 yesDiv，当用户单击no时，将显示 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的解决方案。

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

4

3 回答 3

2

如果你想确保this指的是myObject你打电话的时候，我的建议是稍微switchDiv改变你的功能。init我还更新了您的switchDiv功能以反映这一点。您仍然需要重新分配this，但仅在init函数中

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在分配this给变量以在回调或其他函数中使用时使用。self，默认情况下，是 的快捷方式window.self，它是一个引用当前窗口的全局变量。您不想重新分配它，因为您使用了一些其他代码self

于 2012-07-11T17:21:31.567 回答
0

ECMAScript 1.5（并非所有浏览器都支持）有一个Function.bind绑定this值的方法：

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

现在this总是指调用myObject绑定switchDiv的时间，您可以this.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");

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

(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 回答