JavaScript 中的函数重载

Question

我已经使用 jQuery 一年了，但我仍然不明白这段代码是如何工作的：

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

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

jquery 的一些其他功能也可以像.html() 一样做同样的事情

我想知道这个东西是怎么实现的？他们如何重载 javascript 函数？

Answer 1

javascript 中没有重载，所以像这样的壮举是使用可选参数来执行的。 JavaScript 允许您在不指定参数的情况下调用函数。例如：

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

这个例子是为了指出arguments collection which you get in every function。每个函数都可以将它的参数作为一个集合来获取，并可以相应地执行它的逻辑。但是，显示的示例在现实世界中的写法会有所不同：

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

您没有传递给函数的每个参数都会获得undefined（不是null）的“值”。这使您可以使用最短的逻辑表达式。您可以在if 语句中使用任何值。 null 或 undefined 的变量将被简单地评估为 false。

正如下面的评论指出，如果text 参数为空字符串if (text) 将返回false。因此，对于文本参数，请按类型检查参数。

您也可以read about null and undefined differences。

Answer 2

只需检查函数是否带有参数调用即可完成

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

Answer 3

很简单，只要检查变量是否有值即可：

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
    }
}

Answer 4

function foo(value)
{
     if(typeof value != 'undefined')
     {
         // calling foo(2332)
     }
     else
     {
         // foo()
     }
}

Answer 5

几乎所有其他人都提到，他们没有重载参数，但在第一个语句中，没有为函数提供参数。但是，在第二个中，已经提供了一个论点。因此，一个简单的检查typeof something == "undefined" 可以很容易地修改和区分不同的结果。

这是构成.val()函数的相关jQuery代码（版本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;
            }
        });
    }