Talking about javascript--function overloading

Source: Internet
Author: User

A person thinks that overloading is a set of functions (methods) with the same name and different parameter lists.

From a language perspective, JavaScript does not support function overloading, it is not possible to define the same function and then use the compiler to perform different functions based on different parameters.

But JavaScript can use its own properties to simulate function overloading.

    • Judging by the length value of the arguments object
function overLoading() {  // 根据arguments.length,对不同的值进行不同的操作  switch(arguments.length) {    case 0:      /*操作1的代码写在这里*/      break;    case 1:      /*操作2的代码写在这里*/      break;    case 2:      /*操作3的代码写在这里*/             //后面还有很多的case......    } }

"Secrets of the JavaScript Ninja", written by the father of jquery, John Resig, is a wonderful and ingenious Method! That method takes full advantage of the characteristics of closures!

Before introducing this approach, let's take a look at the names of foreigners, for example, John Resig,john is First-name,resig is Last-name, the equivalent of our name consists of a surname and a name.

We now have such a demand, there is a People object, which contains some names, as follows:

var people = {  values: ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"]};

We want the people object to have a Find method that returns all elements inside the people.values when no arguments are passed, and returns the element that matches the First-name parameter when passing a parameter; When passing two arguments, Then the first-name and Last-name are matched to return. Because the Find method performs different operations depending on the number of arguments, we would like to have a Addmethod method that can add an overload of find for people as follows:

addMethod(people, "find", function() {}); /*不传参*/addMethod(people, "find", function(a) {}); /*传一个*/addMethod(people, "find", function(a, b) {}); /*传两个*/

The implementation method is as follows:

The Addmethod function, which receives 3 parameters, the first is the object to bind the method, the second is the method name of the binding, and the third is the method that needs to be bound (an anonymous function).

function addMethod(object, name, fn) {  var old = object[name]; //把前一次添加的方法存在一个临时变量old里面  object[name] = function() { // 重写了object[name]的方法    // 如果调用object[name]方法时,传入的参数个数跟预期的一致,则直接调用    if(fn.length === arguments.length) {      return fn.apply(this, arguments);    // 否则,判断old是否是函数,如果是,就调用old    } else if(typeof old === "function") {      return old.apply(this, arguments);    }  }}

Complete Example:

Addmethodfunction Addmethod (object, name, fn) {var old = Object[name];    Object[name] = function () {if (fn.length = = = Arguments.length) {return fn.apply (this, arguments);    } else if (typeof old = = = "function") {return old.apply (this, arguments); }}} var people = {values: ["Dean Edwards", "Alex Russell", "Dean Tom"]}; /* Starting with Addmethod to implement overloading of the People.find method *///No arguments, return all elements inside the peopld.values addmethod (people, "find", function () {return This.values;});  When a parameter is passed, the First-name match is returned Addmethod (people, "find", function (FirstName) {var ret = []; for (var i = 0; i < this.values.length; i++) {if (This.values[i].indexof (firstName) = = = 0) {Ret.push (this.value    S[i]); }} (return ret;});  When passing two parameters, the returned first-name and last-name are matched elements addmethod (people, "find", Function (FirstName, lastName) {var ret = []; for (var i = 0; i < this.values.length; i++) {if (this.values[i] = = = (FirstName + "" + LastName)) {ret.push (th    Is.values[i]); }} (return ret;});Test: Console.log (People.find ()); ["Dean Edwards", "Alex Russell", "Dean Tom"]console.log (People.find ("Dean")); ["Dean Edwards", "Dean Tom"]console.log (People.find ("Dean Edwards")); ["Dean Edwards"]

Talking about javascript--function overloading

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.