简体   繁体   中英

Overloading Functions in JavaScript

I have been using jQuery for a year, but I still don't understand how this code works:

alert($('#elementID').val()); // It gets the value of element

$('#elementID').val('setting Value'); // the same function is setting value

some other functions of jquery also do the same like .html()

I want to know how this thing is achieved? How do they overload a javascript function?

There are no overloads in javascript, so feats like this are performed using optional parameters. JavaScript allows you to call functions without specifying parameters. For example:

function val(text)
{
  if (arguments != null && arguments.length > 0) {
    alert("i'm setting value here to " + text);
  } else {
    alert("i'm getting value here");
  }
}

val(); // alerts value getter
val('hi!'); // alerts value setter and the message

This example was written to point out arguments collection which you get in every function . Every function can fetch it's parameters as a collection and can accordingly perform it's logic. However, displayed example would be written differently in real world:

function val(text)
{
  if (typeof text === "string") {
    alert("i'm setting value here to " + text);
  } else {
    alert("i'm getting value here");
  }
}

Each parameter which you do not pass to a function gets "value" of undefined (not null ). This lets you use the shortest logical expression. You can use any value in if statement. Variables which are null or undefined will simply be evaluated as false .

As a comment below pointed out if text parameter is empty string if (text) would return false. For that reason, for text parameters check parameters by type.

It would be beneficial for you to also read about null and undefined differences .

It's simply done by checking if the function was called with a parameter or not

function stuff(moreStuff){
   if(typeof moreStuff === "undefined"){
      return originalStuff;
   }else{
      setStuff(moreStuff);
   }
}

Very simple, just check if the variable has a value:

function foo(param) {
    // Method 1
    if (param != null) {
        // Parameter is defined
    } else {
        // No parameter (or null given)
    }

    // Method 2
    if (arguments.length > 0) {
        // At least one argument has been defined
    }
}
function foo(value)
{
     if(typeof value != 'undefined')
     {
         // calling foo(2332)
     }
     else
     {
         // foo()
     }
}

As nearly everyone else mentioned, they did not overload the parameter, but in the first statement, there is not arguments provided for the function. In the second one though, an argument has been provided. Therefore a simple check typeof something == "undefined" could easily modify and set apart the different results.

This is the relevant jQuery code making up the .val() function (version 1.8.0):

val: function( value ) {
        var hooks, ret, isFunction,
            elem = this[0];

        if ( !arguments.length ) {
            if ( elem ) {
                hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];

                if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
                    return ret;
                }

                ret = elem.value;

                return typeof ret === "string" ?
                    // handle most common string cases
                    ret.replace(rreturn, "") :
                    // handle cases where value is null/undef or number
                    ret == null ? "" : ret;
            }

            return;
        }

        isFunction = jQuery.isFunction( value );

        return this.each(function( i ) {
            var val,
                self = jQuery(this);

            if ( this.nodeType !== 1 ) {
                return;
            }

            if ( isFunction ) {
                val = value.call( this, i, self.val() );
            } else {
                val = value;
            }

            // Treat null/undefined as ""; convert numbers to string
            if ( val == null ) {
                val = "";
            } else if ( typeof val === "number" ) {
                val += "";
            } else if ( jQuery.isArray( val ) ) {
                val = jQuery.map(val, function ( value ) {
                    return value == null ? "" : value + "";
                });
            }

            hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ];

            // If set returns undefined, fall back to normal setting
            if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) {
                this.value = val;
            }
        });
    }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM