Geek asks and answers

Improved design to refer to the object’s own properties from an object method

I have a yes radio input. When the user clicks yes, yesDiv is displayed, and when the user does not click no, noDiv is displayed.

To implement this, I created 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 works, I know that I cannot use this to refer to the properties of an object inside the 'switchDiv' method due to the scope of the 'this' inside the function. I found a solution to send this.config as a parameter, and then using self = ev.data in a related question ( Link to the object’s own properties .)

: , , , ? , ?

+5
3

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

( , .)

0

, 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

+2

ECMAScript 1.5 ( ) Function.bind this:

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

Now it thisalways refers to myObjectwhen the bound is called switchDiv, and you can use this.configevents instead of sending data directly.

0
source

More articles:


All Articles