迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

JavaScript 函数重载

作者:迹忆客 最近更新:2024/03/17 浏览次数:

本教程向你介绍 JavaScript 函数重载。函数重载意味着拥有多个同名函数和各种实现。但是,这个概念在 JavaScript 中不可用。

如果你有多个同名函数,则最后一个函数在 JavaScript 中执行。因此,我们使用替代方法在 JavaScript 中实现函数重载。

本教程使用 if-elseswitch 和函数表达式来完成函数重载。


在 JavaScript 中使用 if-else 语句进行函数重载

function displaySum() {
  // if no argument
  if (arguments.length == 0) {
    console.log('No argument is passed.');
  }

  // if only one argument
  else if (arguments.length == 1) {
    console.log('You have to pass at least two arugments to perform addition.');
  }

  // multiple arguments
  else {
    let sum = 0;
    let length = arguments.length;
    for (var i = 0; i < length; i++) {
      sum = sum + arguments[i];
    }
    console.log('Sum is ' + sum);
  }
}

displaySum();                     // call function with no parameter
displaySum(3);                    // call function with one parameter
displaySum(4, 5);                 // call function with two parameters
displaySum(3, 5, 7, 2, 9, 7, 8);  // call function with multiple parameters

输出:

"No argument is passed."
"You have to pass at least two arguments to perform addition."
"Sum is 9"
"Sum is 41"

在代码片段中,我们使用 if-else 语句在 JavaScript 中进行函数重载。我们调用 displaySum() 函数,它使用不同的参数执行不同的操作。如果没有传递或传递一个参数,它会显示一条消息。

如果给定两个参数,它将添加两个数字,并使用 for 循环将多个参数中的所有值相加。arguments 是类似数组的对象,它们起着至关重要的作用,可以在函数中使用。它表示正在使用它的特定函数传递的参数


在 JavaScript 中使用 switch 语句进行函数重载

我们还可以在 JavaScript 中通过使用 switch 语句而不是 if-else 语句来实现函数重载。尽管两者都产生相同的输出,但使用 switch 语句的代码看起来更简洁。

function displaySum() {
  switch (arguments.length) {
    // if no argument
    case 0:
      console.log('No argument is passed.');
      break;

      // if only one argument
    case 1:
      console.log(
          'You have to pass at least two arguments to perform addition.');
      break;

      // multiple arguments
    default:
      let sum = 0;
      let length = arguments.length;

      for (var i = 0; i < length; i++) {
        sum = sum + arguments[i];
      }
      console.log('Sum is ' + sum);
      break;
  }
}

displaySum();                     // call function with no parameter
displaySum(3);                    // call function with one parameter
displaySum(4, 5);                 // call function with two parameters
displaySum(3, 5, 7, 2, 9, 7, 8);  // call function with multiple parameters

输出:

"No argument is passed."
"You have to pass at least two arguments to perform addition."
"Sum is 9"
"Sum is 41"

在这段代码中,我们使用 switch 语句根据各种参数完成不同的操作。你可以在此处或上一节中阅读有关 arguments 对象的信息。


在 JavaScript 中使用函数表达式进行函数重载

// Creating a class "practiceFunctionOverloading"
class practiceFunctionOverloading {
  // Creating an overloadable function.
  displaySum() {
    // Define four overloaded functions
    var functionNoParam = function() {
      return 'No parameter is passed.';
    };
    var functionOneParam = function(arg1) {
      return 'You must have at least two parameters to sum.';
    };
    var functionTwoParam = function(arg1, arg2) {
      console.log('Sum is given below: ');
      return arg1 + arg2;
    };
    var functionMultiParam = function(arg1, arg2, arg3) {
      var sum = 0;
      for (var i = 0; i < arguments.length; i++) {
        sum = sum + arguments[i];
      }
      console.log('Sum is given below: ');
      return sum;
    };

    /* the length and type of the arguments passed
       ( in this case an Array ) we can determine
       which function to be executed */
    if (arguments.length === 0) {
      return functionNoParam();
    } else if (arguments.length === 1) {
      return functionOneParam(arguments[0]);
    } else if (arguments.length === 2) {
      return functionTwoParam(arguments[0], arguments[1]);
    } else if (arguments.length > 2) {
      return functionMultiParam(arguments[0], arguments[1], arguments[2]);
    }
  }
}
// Driver Code
// create an object of class practiceFunctionOverloading
var object = new practiceFunctionOverloading();
console.log(object.displaySum());         // call function with no parameter
console.log(object.displaySum(1));        // call function with one parameter
console.log(object.displaySum(2, 3));     // call function with two parameters
console.log(object.displaySum(2, 4, 5));  // call function with three parameters

输出:

"No parameter is passed."
"You must have at least two parameters to sum."
"Sum is given below: "
5
"Sum is given below: "
11

我们使用函数和函数表达式来模拟使用 JavaScript 的函数重载。这种方法的缺点是如果传递了数百个参数,代码看起来会比较混乱。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

Do you understand JavaScript closures?

发布时间:2025/02/21 浏览次数:108 分类:JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间:2025/02/21 浏览次数:178 分类:JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间:2025/02/21 浏览次数:150 分类:JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

用 jQuery 检查复选框是否被选中

发布时间:2024/03/24 浏览次数:102 分类:JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便