Apa cara terbaik untuk kelebihan fungsi palsu di Javascript?

Saya tahu tidak mungkin untuk membebani fungsi dalam Javascript seperti pada bahasa lain. Jika saya membutuhkan fungsi dengan dua penggunaan foo(x)dan foo(x,y,z)yang merupakan cara terbaik / disukai:

1. Menggunakan nama yang berbeda di tempat pertama
2. Menggunakan argumen opsional seperti y = y || 'default'
3. Menggunakan sejumlah argumen
4. Memeriksa jenis argumen
5. Atau bagaimana?

Cara terbaik untuk melakukan overloading fungsi dengan parameter adalah tidak memeriksa panjang argumen atau jenisnya; memeriksa jenisnya hanya akan membuat kode Anda lambat dan Anda bersenang-senang dengan Array, nulls, Objects, dll.

Apa yang dilakukan sebagian besar pengembang adalah menempel pada objek sebagai argumen terakhir untuk metode mereka. Objek ini bisa menampung apa saja.

function foo(a, b, opts) {
  // ...
  if (opts['test']) { } //if test param exists, do something.. 
}


foo(1, 2, {"method":"add"});
foo(3, 4, {"test":"equals", "bar":"tree"});

Maka Anda bisa mengatasinya tetap Anda inginkan dalam metode Anda. [Ganti, jika ada, dll.]

Saya sering melakukan ini:

C #:

public string CatStrings(string p1)                  {return p1;}
public string CatStrings(string p1, int p2)          {return p1+p2.ToString();}
public string CatStrings(string p1, int p2, bool p3) {return p1+p2.ToString()+p3.ToString();}

CatStrings("one");        // result = one
CatStrings("one",2);      // result = one2
CatStrings("one",2,true); // result = one2true

Setara JavaScript:

function CatStrings(p1, p2, p3)
{
  var s = p1;
  if(typeof p2 !== "undefined") {s += p2;}
  if(typeof p3 !== "undefined") {s += p3;}
  return s;
};

CatStrings("one");        // result = one
CatStrings("one",2);      // result = one2
CatStrings("one",2,true); // result = one2true

Contoh khusus ini sebenarnya lebih elegan dalam javascript daripada C #. Parameter yang tidak ditentukan adalah 'tidak terdefinisi' dalam javascript, yang dievaluasi menjadi false dalam pernyataan if. Namun, definisi fungsi tidak menyampaikan informasi bahwa p2 dan p3 adalah opsional. Jika Anda membutuhkan banyak kelebihan, jQuery telah memutuskan untuk menggunakan objek sebagai parameter, misalnya, jQuery.ajax (opsi). Saya setuju dengan mereka bahwa ini adalah pendekatan kelebihan muatan yang paling kuat dan dapat didokumentasikan, tetapi saya jarang membutuhkan lebih dari satu atau dua parameter opsional cepat.

EDIT: mengubah tes IF sesuai saran Ian

Tidak ada fungsi nyata kelebihan dalam JavaScript karena memungkinkan untuk melewati sejumlah parameter jenis apa pun. Anda harus memeriksa di dalam fungsi, berapa banyak argumen yang telah diajukan dan apa jenisnya.

Jawaban yang benar adalah TIDAK ADA OVERLOADING DI JAVASCRIPT.

Memeriksa / Mengalihkan di dalam fungsi tersebut tidak MENGATASI.

Konsep overloading: Dalam beberapa bahasa pemrograman, fungsi overloading atau overloading metode adalah kemampuan untuk membuat beberapa metode dengan nama yang sama dengan implementasi yang berbeda. Panggilan ke fungsi yang kelebihan beban akan menjalankan implementasi spesifik dari fungsi yang sesuai dengan konteks panggilan, memungkinkan satu panggilan fungsi untuk melakukan tugas yang berbeda tergantung pada konteksnya.

Sebagai contoh, doTask () dan doTask (objek O) adalah metode kelebihan beban. Untuk memanggil yang terakhir, sebuah objek harus dilewatkan sebagai parameter, sedangkan yang pertama tidak memerlukan parameter, dan dipanggil dengan bidang parameter kosong. Kesalahan umum adalah untuk menetapkan nilai default ke objek dalam metode kedua, yang akan menghasilkan kesalahan panggilan ambigu, karena kompiler tidak akan tahu yang mana dari dua metode yang digunakan.

https://en.wikipedia.org/wiki/Function_overloading

Semua implementasi yang disarankan bagus, tapi jujur ​​saja, tidak ada implementasi asli untuk JavaScript.

Ada dua cara Anda bisa mendekati ini dengan lebih baik:

1. Lulus kamus (array asosiatif) jika Anda ingin memberikan banyak fleksibilitas

2. Ambil objek sebagai argumen dan gunakan pewarisan berbasis prototipe untuk menambah fleksibilitas.

Berikut adalah pendekatan yang memungkinkan overloading metode nyata menggunakan tipe parameter, yang ditunjukkan di bawah ini:

Func(new Point());
Func(new Dimension());
Func(new Dimension(), new Point());
Func(0, 0, 0, 0);

Edit (2018) : Karena ini ditulis pada tahun 2011, kecepatan panggilan metode langsung telah sangat meningkat sementara kecepatan metode kelebihan beban tidak.

Ini bukan pendekatan yang saya rekomendasikan, tetapi merupakan pemikiran yang bermanfaat untuk memikirkan bagaimana Anda dapat memecahkan masalah-masalah seperti ini.

Berikut adalah patokan dari berbagai pendekatan - https://jsperf.com/function-overloading . Ini menunjukkan bahwa kelebihan fungsi (memperhitungkan jenis) dapat sekitar 13 kali lebih lambat di Google Chrome V8 pada 16.0 (beta) .

Serta melewati objek (yaitu {x: 0, y: 0}), seseorang juga dapat mengambil pendekatan C saat yang tepat, penamaan metode yang sesuai. Misalnya, Vector.AddVector (vektor), Vector.AddIntegers (x, y, z, ...) dan Vector.AddArray (integerArray). Anda dapat melihat pustaka C, seperti OpenGL untuk penamaan inspirasi.

Edit : Saya telah menambahkan patokan untuk meneruskan objek dan menguji objek menggunakan keduanya 'param' in argdan arg.hasOwnProperty('param'), dan fungsi kelebihan beban jauh lebih cepat daripada melewati objek dan memeriksa properti (setidaknya dalam patokan ini).

Dari perspektif desain, fungsi kelebihan hanya valid atau logis jika parameter kelebihan sesuai dengan tindakan yang sama. Jadi masuk akal bahwa seharusnya ada metode mendasar yang hanya memusatkan perhatian pada perincian spesifik, jika tidak, itu mungkin mengindikasikan pilihan desain yang tidak tepat. Jadi kita juga bisa menyelesaikan penggunaan fungsi kelebihan dengan mengkonversi data ke objek masing-masing. Tentu saja orang harus mempertimbangkan ruang lingkup masalah karena tidak perlu membuat desain yang rumit jika niat Anda hanya untuk mencetak nama, tetapi untuk desain kerangka kerja dan perpustakaan pemikiran seperti itu dibenarkan.

Contoh saya berasal dari implementasi Rectangle - maka disebutkan Dimensi dan Titik. Mungkin Rectangle dapat menambahkan GetRectangle()metode ke Dimensiondan Pointprototipe, dan kemudian masalah kelebihan fungsi diurutkan. Dan bagaimana dengan primitif? Kita memiliki panjang argumen, yang sekarang merupakan tes yang valid karena objek memiliki GetRectangle()metode.

function Dimension() {}
function Point() {}

var Util = {};

Util.Redirect = function (args, func) {
  'use strict';
  var REDIRECT_ARGUMENT_COUNT = 2;

  if(arguments.length - REDIRECT_ARGUMENT_COUNT !== args.length) {
    return null;
  }

  for(var i = REDIRECT_ARGUMENT_COUNT; i < arguments.length; ++i) {
    var argsIndex = i-REDIRECT_ARGUMENT_COUNT;
    var currentArgument = args[argsIndex];
    var currentType = arguments[i];
    if(typeof(currentType) === 'object') {
      currentType = currentType.constructor;
    }
    if(typeof(currentType) === 'number') {
      currentType = 'number';
    }
    if(typeof(currentType) === 'string' && currentType === '') {
      currentType = 'string';
    }
    if(typeof(currentType) === 'function') {
      if(!(currentArgument instanceof currentType)) {
        return null;
      }
    } else {
      if(typeof(currentArgument) !== currentType) {
        return null;
      }
    } 
  }
  return [func.apply(this, args)];
}

function FuncPoint(point) {}
function FuncDimension(dimension) {}
function FuncDimensionPoint(dimension, point) {}
function FuncXYWidthHeight(x, y, width, height) { }

function Func() {
  Util.Redirect(arguments, FuncPoint, Point);
  Util.Redirect(arguments, FuncDimension, Dimension);
  Util.Redirect(arguments, FuncDimensionPoint, Dimension, Point);
  Util.Redirect(arguments, FuncXYWidthHeight, 0, 0, 0, 0);
}

Func(new Point());
Func(new Dimension());
Func(new Dimension(), new Point());
Func(0, 0, 0, 0);

Cara terbaik sangat tergantung pada fungsi dan argumennya. Setiap pilihan Anda adalah ide bagus dalam situasi yang berbeda. Saya biasanya mencoba ini dalam urutan berikut sampai salah satu dari mereka berfungsi:

1. Menggunakan argumen opsional seperti y = y || 'default'. Ini nyaman jika Anda bisa melakukannya, tetapi mungkin tidak selalu berhasil secara praktis, misalnya ketika 0 / null / undefined akan menjadi argumen yang valid.

2. Menggunakan sejumlah argumen. Mirip dengan opsi terakhir tetapi dapat bekerja ketika # 1 tidak berfungsi.

3. Memeriksa jenis argumen. Ini dapat bekerja dalam beberapa kasus di mana jumlah argumennya sama. Jika Anda tidak dapat menentukan jenisnya dengan andal, Anda mungkin perlu menggunakan nama yang berbeda.

4. Menggunakan nama yang berbeda di tempat pertama. Anda mungkin perlu melakukan ini jika opsi lain tidak berfungsi, tidak praktis, atau untuk konsistensi dengan fungsi terkait lainnya.

Jika saya membutuhkan fungsi dengan dua menggunakan foo (x) dan foo (x, y, z) yang merupakan cara terbaik / disukai?

Masalahnya adalah bahwa JavaScript TIDAK mendukung kelebihan metode secara bawaan. Jadi, jika ia melihat / mem-parsing dua atau lebih fungsi dengan nama yang sama, ia hanya akan mempertimbangkan fungsi yang didefinisikan terakhir dan menimpa yang sebelumnya.

Salah satu cara yang menurut saya cocok untuk sebagian besar kasus adalah sebagai berikut -

Katakanlah Anda memiliki metode

function foo(x)
{
} 

Alih-alih metode overloading yang tidak mungkin dilakukan dalam javascript, Anda dapat menentukan metode baru

fooNew(x,y,z)
{
}

dan kemudian memodifikasi fungsi 1 sebagai berikut -

function foo(arguments)
{
  if(arguments.length==2)
  {
     return fooNew(arguments[0],  arguments[1]);
  }
} 

Jika Anda memiliki banyak metode kelebihan seperti itu pertimbangkan untuk menggunakan switch bukan hanya if-elsepernyataan.

( lebih detail )

PS: Tautan di atas menuju ke blog pribadi saya yang memiliki detail tambahan.

Saya tidak yakin tentang praktik terbaik, tetapi inilah cara saya melakukannya:

/*
 * Object Constructor
 */
var foo = function(x) {
    this.x = x;
};

/*
 * Object Protoype
 */
foo.prototype = {
    /*
     * f is the name that is going to be used to call the various overloaded versions
     */
    f: function() {

        /*
         * Save 'this' in order to use it inside the overloaded functions
         * because there 'this' has a different meaning.
         */   
        var that = this;  

        /* 
         * Define three overloaded functions
         */
        var f1 = function(arg1) {
            console.log("f1 called with " + arg1);
            return arg1 + that.x;
        }

        var f2 = function(arg1, arg2) {
             console.log("f2 called with " + arg1 + " and " + arg2);
             return arg1 + arg2 + that.x;
        }

        var f3 = function(arg1) {
             console.log("f3 called with [" + arg1[0] + ", " + arg1[1] + "]");
             return arg1[0] + arg1[1];
        }

        /*
         * Use the arguments array-like object to decide which function to execute when calling f(...)
         */
        if (arguments.length === 1 && !Array.isArray(arguments[0])) {
            return f1(arguments[0]);
        } else if (arguments.length === 2) {
            return f2(arguments[0], arguments[1]);
        } else if (arguments.length === 1 && Array.isArray(arguments[0])) {
            return f3(arguments[0]);
        }
    } 
}

/* 
 * Instantiate an object
 */
var obj = new foo("z");

/*
 * Call the overloaded functions using f(...)
 */
console.log(obj.f("x"));         // executes f1, returns "xz"
console.log(obj.f("x", "y"));    // executes f2, returns "xyz"
console.log(obj.f(["x", "y"]));  // executes f3, returns "xy"

Saya baru saja mencoba ini, mungkin itu sesuai dengan kebutuhan Anda. Bergantung pada jumlah argumen, Anda dapat mengakses fungsi yang berbeda. Anda menginisialisasi saat pertama kali Anda menyebutnya. Dan peta fungsi disembunyikan di penutupan.

TEST = {};

TEST.multiFn = function(){
    // function map for our overloads
    var fnMap = {};

    fnMap[0] = function(){
        console.log("nothing here");
        return this;    //    support chaining
    }

    fnMap[1] = function(arg1){
        //    CODE here...
        console.log("1 arg: "+arg1);
        return this;
    };

    fnMap[2] = function(arg1, arg2){
        //    CODE here...
        console.log("2 args: "+arg1+", "+arg2);
        return this;
    };

    fnMap[3] = function(arg1,arg2,arg3){
        //    CODE here...
        console.log("3 args: "+arg1+", "+arg2+", "+arg3);
        return this;
    };

    console.log("multiFn is now initialized");

    //    redefine the function using the fnMap in the closure
    this.multiFn = function(){
        fnMap[arguments.length].apply(this, arguments);
        return this;
    };

    //    call the function since this code will only run once
    this.multiFn.apply(this, arguments);

    return this;    
};

Menguji.

TEST.multiFn("0")
    .multiFn()
    .multiFn("0","1","2");

Karena JavaScript tidak memiliki fungsi, objek opsi overload dapat digunakan sebagai gantinya. Jika ada satu atau dua argumen yang diperlukan, lebih baik memisahkannya dari objek opsi. Berikut adalah contoh tentang cara menggunakan objek opsi dan nilai yang dihuni ke nilai default jika nilai tidak diteruskan dalam objek opsi.

    function optionsObjectTest(x, y, opts) {
        opts = opts || {}; // default to an empty options object

        var stringValue = opts.stringValue || "string default value";
        var boolValue = !!opts.boolValue; // coerces value to boolean with a double negation pattern
        var numericValue = opts.numericValue === undefined ? 123 : opts.numericValue;

        return "{x:" + x + ", y:" + y + ", stringValue:'" + stringValue + "', boolValue:" + boolValue + ", numericValue:" + numericValue + "}";

}

di sini adalah contoh tentang cara menggunakan objek opsi

Tidak ada cara untuk berfungsi kelebihan dalam javascript. Jadi, saya sarankan seperti berikut dengan typeof()metode alih-alih beberapa fungsi ke pemuatan berlebih palsu.

function multiTypeFunc(param)
{
    if(typeof param == 'string') {
        alert("I got a string type parameter!!");
     }else if(typeof param == 'number') {
        alert("I got a number type parameter!!");
     }else if(typeof param == 'boolean') {
        alert("I got a boolean type parameter!!");
     }else if(typeof param == 'object') {
        alert("I got a object type parameter!!");
     }else{
        alert("error : the parameter is undefined or null!!");
     }
}

Semoga berhasil!

PENGANTAR

Sejauh ini membaca begitu banyak jawaban akan membuat orang sakit kepala. Siapa pun yang ingin tahu konsepnya perlu mengetahui prasyarat berikut .

Function overloading Definition, Function Length property,Function argument property

Function overloadingdalam bentuknya yang paling sederhana berarti bahwa suatu fungsi melakukan tugas yang berbeda berdasarkan jumlah argumen yang diteruskan kepadanya. Khususnya TASK1, TASK2 dan TASK3 disorot di bawah ini dan dilakukan berdasarkan jumlah argumentsyang diteruskan ke fungsi yang sama fooYo.

// if we have a function defined below
function fooYo(){
     // do something here
}
// on invoking fooYo with different number of arguments it should be capable to do different things

fooYo();  // does TASK1
fooYo('sagar'); // does TASK2
fooYo('sagar','munjal'); // does TAKS3

CATATAN - JS tidak memberikan kemampuan kelebihan fungsi yang bawaan.

Alternatif

John E Resig (pembuat JS) telah menunjukkan alternatif yang menggunakan prasyarat di atas untuk mencapai kemampuan untuk mengimplementasikan fungsi overloading.

Kode di bawah ini menggunakan pendekatan langsung tetapi naif dengan menggunakan if-elseatau switchpernyataan.

• mengevaluasi argument-lengthproperti.
• nilai yang berbeda menghasilkan permintaan fungsi yang berbeda.

var ninja = {
  whatever: function() {
       switch (arguments.length) {
         case 0:
           /* do something */
           break;
         case 1:
           /* do something else */
           break;
         case 2:
           /* do yet something else */
           break;
       //and so on ...
    } 
  }
}

Teknik lain jauh lebih bersih dan dinamis. Sorotan teknik ini adalah addMethodfungsi generik.

• kita mendefinisikan fungsi addMethodyang digunakan untuk menambahkan fungsi yang berbeda ke objek dengan nama yang sama tetapi fungsi yang berbeda .

• di bawah addMethodfungsi menerima tiga nama objek params object, nama fungsi namedan fungsi yang ingin kita panggil fn.

• Di dalam addMethoddefinisi var oldmenyimpan referensi ke yang sebelumnya functiondisimpan dengan bantuan penutupan - gelembung pelindung.

function 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);
  };
};

• gunakan debugger untuk memahami aliran kode.
• di bawah ini addMethodmenambahkan tiga fungsi yang ketika dipanggil digunakan ninja.whatever(x)dengan jumlah argumen xyang bisa berupa apa saja yaitu kosong atau satu atau lebih dari satu memanggil fungsi yang berbeda seperti yang didefinisikan saat memanfaatkan addMethodfungsi.

var ninja = {};
debugger;


addMethod(ninja,'whatever',function(){ console.log("I am the one with ZERO arguments supplied") });
addMethod(ninja,'whatever',function(a){ console.log("I am the one with ONE arguments supplied") });
addMethod(ninja,'whatever',function(a,b){ console.log("I am the one with TWO arguments supplied") });


ninja.whatever();
ninja.whatever(1,2);
ninja.whatever(3);

Cara lain untuk mendekati ini adalah dengan menggunakan variabel khusus: argumen , ini adalah implementasi:

function sum() {
    var x = 0;
    for (var i = 0; i < arguments.length; ++i) {
        x += arguments[i];
    }
    return x;
}

sehingga Anda dapat mengubah kode ini menjadi:

function sum(){
    var s = 0;
    if (typeof arguments[0] !== "undefined") s += arguments[0];
.
.
.
    return s;
}

lihat ini. Itu sangat keren. http://ejohn.org/blog/javascript-method-overloading/ Trik Javascript untuk memungkinkan Anda melakukan panggilan seperti ini:

var users = new Users();
users.find(); // Finds all
users.find("John"); // Finds users by name
users.find("John", "Resig"); // Finds users by first and last name

Fungsi overloading di Javascript:

Function overloading adalah kemampuan bahasa pemrograman untuk membuat banyak fungsi dengan nama yang sama dengan implementasi yang berbeda. ketika fungsi kelebihan beban dipanggil akan menjalankan fungsi implementasi spesifik dari fungsi yang sesuai dengan konteks panggilan. Konteks ini biasanya jumlah argumen yang diterima, dan memungkinkan satu pemanggilan fungsi untuk berperilaku berbeda tergantung pada konteks.

Javascript tidak memiliki kelebihan fungsi bawaan. Namun, perilaku ini dapat ditiru dengan banyak cara. Inilah yang sederhana dan nyaman:

function sayHi(a, b) {
  console.log('hi there ' + a);
  if (b) { console.log('and ' + b) } // if the parameter is present, execute the block
}

sayHi('Frank', 'Willem');

Dalam skenario di mana Anda tidak tahu berapa banyak argumen yang akan Anda dapatkan, Anda dapat menggunakan operator lainnya yang terdiri dari tiga titik .... Ini akan mengubah sisa argumen menjadi sebuah array. Waspadalah terhadap kompatibilitas browser. Berikut ini sebuah contoh:

function foo (a, ...b) {
  console.log(b);
}

foo(1,2,3,4);
foo(1,2);

Karena posting ini sudah mengandung banyak solusi yang berbeda, saya pikir saya memposting yang lain.

function onlyUnique(value, index, self) {
    return self.indexOf(value) === index;
}

function overload() {
   var functions = arguments;
   var nroffunctionsarguments = [arguments.length];
    for (var i = 0; i < arguments.length; i++) {
        nroffunctionsarguments[i] = arguments[i].length;
    }
    var unique = nroffunctionsarguments.filter(onlyUnique);
    if (unique.length === arguments.length) {
        return function () {
            var indexoffunction = nroffunctionsarguments.indexOf(arguments.length);
            return functions[indexoffunction].apply(this, arguments);
        }
    }
    else throw new TypeError("There are multiple functions with the same number of parameters");

}

ini dapat digunakan seperti yang ditunjukkan di bawah ini:

var createVector = overload(
        function (length) {
            return { x: length / 1.414, y: length / 1.414 };
        },
        function (a, b) {
            return { x: a, y: b };
        },
        function (a, b,c) {
            return { x: a, y: b, z:c};
        }
    );
console.log(createVector(3, 4));
console.log(createVector(3, 4,5));
console.log(createVector(7.07));

Solusi ini tidak sempurna tetapi saya hanya ingin menunjukkan bagaimana itu bisa dilakukan.

Anda dapat menggunakan 'addMethod' dari John Resig. Dengan metode ini Anda dapat "membebani" metode berdasarkan jumlah argumen.

// addMethod - By John Resig (MIT Licensed)
function 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 );
    };
}

Saya juga telah membuat alternatif untuk metode ini yang menggunakan caching untuk menyimpan variasi fungsi. Perbedaannya dijelaskan di sini

// addMethod - By Stavros Ioannidis
function addMethod(obj, name, fn) {
  obj[name] = obj[name] || function() {
    // get the cached method with arguments.length arguments
    var method = obj[name].cache[arguments.length];

    // if method exists call it 
    if ( !! method)
      return method.apply(this, arguments);
    else throw new Error("Wrong number of arguments");
  };

  // initialize obj[name].cache
  obj[name].cache = obj[name].cache || {};

  // Check if a method with the same number of arguments exists  
  if ( !! obj[name].cache[fn.length])
    throw new Error("Cannot define multiple '" + name +
      "' methods with the same number of arguments!");

  // cache the method with fn.length arguments
  obj[name].cache[fn.length] = function() {
    return fn.apply(this, arguments);
  };
}

Pola Penerusan => praktik terbaik tentang JS overloading

Teruskan ke fungsi lain yang namanya dibangun dari poin ke-3 & ke-4:

3. Menggunakan sejumlah argumen
4. Memeriksa jenis argumen

window['foo_'+arguments.length+'_'+Array.from(arguments).map((arg)=>typeof arg).join('_')](...arguments)

Aplikasi pada kasus Anda:

 function foo(){
          return window['foo_'+arguments.length+Array.from(arguments).map((arg)=>typeof arg).join('_')](...arguments);

  }
   //------Assuming that `x` , `y` and `z` are String when calling `foo` . 

  /**-- for :  foo(x)*/
  function foo_1_string(){
  }
  /**-- for : foo(x,y,z) ---*/
  function foo_3_string_string_string(){

  }

Sampel Kompleks lainnya:

      function foo(){
          return window['foo_'+arguments.length+Array.from(arguments).map((arg)=>typeof arg).join('_')](...arguments);
       }

        /** one argument & this argument is string */
      function foo_1_string(){

      }
       //------------
       /** one argument & this argument is object */
      function foo_1_object(){

      }
      //----------
      /** two arguments & those arguments are both string */
      function foo_2_string_string(){

      }
       //--------
      /** Three arguments & those arguments are : id(number),name(string), callback(function) */
      function foo_3_number_string_function(){
                let args=arguments;
                  new Person(args[0],args[1]).onReady(args[3]);
      }

       //--- And so on ....   

Function Overloading melalui Dynamic Polymorphism dalam 100 baris JS

• VanillaJS, tidak ada dependensi eksternal
• Dukungan Peramban Lengkap - Array.prototype.slice , Object.prototype.toString
• 1114 bytes uglify'd / 744 bytes g-zip

Ini dari tubuh yang lebih besar dari kode yang meliputi isFn, isArr, dll jenis fungsi pemeriksaan. Versi VanillaJS di bawah ini telah dikerjakan ulang untuk menghapus semua dependensi eksternal, namun Anda harus menentukan fungsi memeriksa jenis Anda sendiri untuk digunakan dalam .add()panggilan.

Catatan: Ini adalah fungsi self-executing (sehingga kita dapat memiliki lingkup penutupan / tertutup), karenanya tugas untuk window.overloaddaripada function overload() {...}.

window.overload = function () {
    "use strict"

    var a_fnOverloads = [],
        _Object_prototype_toString = Object.prototype.toString
    ;

    function isFn(f) {
        return (_Object_prototype_toString.call(f) === '[object Function]');
    } //# isFn

    function isObj(o) {
        return !!(o && o === Object(o));
    } //# isObj

    function isArr(a) {
        return (_Object_prototype_toString.call(a) === '[object Array]');
    } //# isArr

    function mkArr(a) {
        return Array.prototype.slice.call(a);
    } //# mkArr

    function fnCall(fn, vContext, vArguments) {
        //# <ES5 Support for array-like objects
        //#     See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply#Browser_compatibility
        vArguments = (isArr(vArguments) ? vArguments : mkArr(vArguments));

        if (isFn(fn)) {
            return fn.apply(vContext || this, vArguments);
        }
    } //# fnCall

    //# 
    function registerAlias(fnOverload, fn, sAlias) {
        //# 
        if (sAlias && !fnOverload[sAlias]) {
            fnOverload[sAlias] = fn;
        }
    } //# registerAlias

    //# 
    function overload(vOptions) {
        var oData = (isFn(vOptions) ?
                { default: vOptions } :
                (isObj(vOptions) ?
                    vOptions :
                    {
                        default: function (/*arguments*/) {
                            throw "Overload not found for arguments: [" + mkArr(arguments) + "]";
                        }
                    }
                )
            ),
            fnOverload = function (/*arguments*/) {
                var oEntry, i, j,
                    a = arguments,
                    oArgumentTests = oData[a.length] || []
                ;

                //# Traverse the oArgumentTests for the number of passed a(rguments), defaulting the oEntry at the beginning of each loop
                for (i = 0; i < oArgumentTests.length; i++) {
                    oEntry = oArgumentTests[i];

                    //# Traverse the passed a(rguments), if a .test for the current oArgumentTests fails, reset oEntry and fall from the a(rgument)s loop
                    for (j = 0; j < a.length; j++) {
                        if (!oArgumentTests[i].tests[j](a[j])) {
                            oEntry = undefined;
                            break;
                        }
                    }

                    //# If all of the a(rgument)s passed the .tests we found our oEntry, so break from the oArgumentTests loop
                    if (oEntry) {
                        break;
                    }
                }

                //# If we found our oEntry above, .fn.call its .fn
                if (oEntry) {
                    oEntry.calls++;
                    return fnCall(oEntry.fn, this, a);
                }
                //# Else we were unable to find a matching oArgumentTests oEntry, so .fn.call our .default
                else {
                    return fnCall(oData.default, this, a);
                }
            } //# fnOverload
        ;

        //# 
        fnOverload.add = function (fn, a_vArgumentTests, sAlias) {
            var i,
                bValid = isFn(fn),
                iLen = (isArr(a_vArgumentTests) ? a_vArgumentTests.length : 0)
            ;

            //# 
            if (bValid) {
                //# Traverse the a_vArgumentTests, processinge each to ensure they are functions (or references to )
                for (i = 0; i < iLen; i++) {
                    if (!isFn(a_vArgumentTests[i])) {
                        bValid = _false;
                    }
                }
            }

            //# If the a_vArgumentTests are bValid, set the info into oData under the a_vArgumentTests's iLen
            if (bValid) {
                oData[iLen] = oData[iLen] || [];
                oData[iLen].push({
                    fn: fn,
                    tests: a_vArgumentTests,
                    calls: 0
                });

                //# 
                registerAlias(fnOverload, fn, sAlias);

                return fnOverload;
            }
            //# Else one of the passed arguments was not bValid, so throw the error
            else {
                throw "poly.overload: All tests must be functions or strings referencing `is.*`.";
            }
        }; //# overload*.add

        //# 
        fnOverload.list = function (iArgumentCount) {
            return (arguments.length > 0 ? oData[iArgumentCount] || [] : oData);
        }; //# overload*.list

        //# 
        a_fnOverloads.push(fnOverload);
        registerAlias(fnOverload, oData.default, "default");

        return fnOverload;
    } //# overload

    //# 
    overload.is = function (fnTarget) {
        return (a_fnOverloads.indexOf(fnTarget) > -1);
    } //# overload.is

    return overload;
}();

Pemakaian:

Penelepon mendefinisikan fungsi kelebihannya dengan menetapkan variabel untuk kembalinya overload(). Berkat rantai, kelebihan beban tambahan dapat didefinisikan secara seri:

var myOverloadedFn = overload(function(){ console.log("default", arguments) })
    .add(function(){ console.log("noArgs", arguments) }, [], "noArgs")
    .add(function(){ console.log("str", arguments) }, [function(s){ return typeof s === 'string' }], "str")
;

Argumen opsional tunggal untuk overload()menetapkan fungsi "default" untuk dipanggil jika tanda tangan tidak dapat diidentifikasi. Argumen untuk .add()adalah:

1. fn: functionmendefinisikan kelebihan;
2. a_vArgumentTests: Arrayof functions mendefinisikan tes untuk dijalankan pada arguments. Masing-masing functionmenerima satu argumen dan mengembalikan trueargumen Anda jika argumen itu valid;
3. sAlias(Opsional): stringmendefinisikan alias untuk secara langsung mengakses fungsi overload ( fn), mis. myOverloadedFn.noArgs()Akan memanggil fungsi itu secara langsung, menghindari tes polimorfisme dinamis dari argumen.

Implementasi ini sebenarnya memungkinkan lebih dari sekedar kelebihan fungsi tradisional karena a_vArgumentTestsargumen kedua .add()dalam praktiknya mendefinisikan tipe kustom. Jadi, Anda bisa membuat gerbang argumen tidak hanya berdasarkan jenis, tetapi pada rentang, nilai, atau koleksi nilai!

Jika Anda melihat melalui 145 baris kode untuk overload()Anda akan melihat bahwa setiap tanda tangan dikategorikan berdasarkan jumlah yang argumentsditeruskan ke sana. Ini dilakukan agar kami membatasi jumlah tes yang kami jalankan. Saya juga melacak jumlah panggilan. Dengan beberapa kode tambahan, array fungsi yang kelebihan beban dapat disortir ulang sehingga fungsi yang lebih umum diuji terlebih dahulu, kembali menambahkan beberapa ukuran peningkatan kinerja.

Sekarang, ada beberapa peringatan ... Karena Javascript diketik secara longgar, Anda harus berhati-hati dengan Anda vArgumentTestskarena integerdapat divalidasi sebagai float, dll.

Versi JSCompress.com (1114 byte, 744 byte g-zip):

window.overload=function(){'use strict';function b(n){return'[object Function]'===m.call(n)}function c(n){return!!(n&&n===Object(n))}function d(n){return'[object Array]'===m.call(n)}function e(n){return Array.prototype.slice.call(n)}function g(n,p,q){if(q=d(q)?q:e(q),b(n))return n.apply(p||this,q)}function h(n,p,q){q&&!n[q]&&(n[q]=p)}function k(n){var p=b(n)?{default:n}:c(n)?n:{default:function(){throw'Overload not found for arguments: ['+e(arguments)+']'}},q=function(){var r,s,t,u=arguments,v=p[u.length]||[];for(s=0;s<v.length;s++){for(r=v[s],t=0;t<u.length;t++)if(!v[s].tests[t](u[t])){r=void 0;break}if(r)break}return r?(r.calls++,g(r.fn,this,u)):g(p.default,this,u)};return q.add=function(r,s,t){var u,v=b(r),w=d(s)?s.length:0;if(v)for(u=0;u<w;u++)b(s[u])||(v=_false);if(v)return p[w]=p[w]||[],p[w].push({fn:r,tests:s,calls:0}),h(q,r,t),q;throw'poly.overload: All tests must be functions or strings referencing `is.*`.'},q.list=function(r){return 0<arguments.length?p[r]||[]:p},l.push(q),h(q,p.default,'default'),q}var l=[],m=Object.prototype.toString;return k.is=function(n){return-1<l.indexOf(n)},k}();

Anda sekarang dapat melakukan fungsi overloading di ECMAScript 2018 tanpa polyfill, memeriksa var length / type, dll., Cukup gunakan sintaks spread .

function foo(var1, var2, opts){
  // set default values for parameters
  const defaultOpts = {
    a: [1,2,3],
    b: true,
    c: 0.3289,
    d: "str",
  }
  // merge default and passed-in parameters
  // defaultOpts must go first!
  const mergedOpts = {...defaultOpts, ...opts};

  // you can now refer to parameters like b as mergedOpts.b,
  // or just assign mergedOpts.b to b
  console.log(mergedOpts.a);
  console.log(mergedOpts.b);
  console.log(mergedOpts.c);  
  console.log(mergedOpts.d);
}
// the parameters you passed in override the default ones
// all JS types are supported: primitives, objects, arrays, functions, etc.
let var1, var2="random var";
foo(var1, var2, {a: [1,2], d: "differentString"});

// parameter values inside foo:
//a: [1,2]
//b: true
//c: 0.3289
//d: "differentString"

Apa itu sintaksis penyebaran?

Properti Istirahat / Sebarkan proposal ECMAScript (tahap 4) menambahkan properti sebar ke objek literal. Ini menyalin properti enumerable sendiri dari objek yang disediakan ke objek baru. Lebih lanjut tentang mdn

Catatan: menyebar sintaks dalam objek literal tidak berfungsi di Edge dan IE dan itu adalah fitur eksperimental. lihat kompatibilitas browser

Hal seperti ini dapat dilakukan untuk fungsi yang berlebihan.

function addCSS(el, prop, val) {
  return {
    2: function() {
      // when two arguments are set
      // now prop is an oject
      for (var i in prop) {
          el.style[i] = prop[i];
      }
    },
    3: function() {
      // when three arguments are set
      el.style[prop] = val;
    }
    }[arguments.length]();
}
// usage
var el = document.getElementById("demo");
addCSS(el, "color", "blue");
addCSS(el, {
    "backgroundColor": "black",
  "padding": "10px"
});

Sumber

Ini adalah pertanyaan lama tetapi satu yang saya pikir perlu entri lain (walaupun saya ragu ada yang akan membacanya). Penggunaan Ekspresi Fungsi Segera Diminta (IIFE) dapat digunakan bersama dengan fungsi penutupan dan inline untuk memungkinkan kelebihan fungsi. Pertimbangkan contoh berikut (dibuat-buat):

var foo;

// original 'foo' definition
foo = function(a) {
  console.log("a: " + a);
}

// define 'foo' to accept two arguments
foo = (function() {
  // store a reference to the previous definition of 'foo'
  var old = foo;

  // use inline function so that you can refer to it internally
  return function newFoo(a,b) {

    // check that the arguments.length == the number of arguments 
    // defined for 'newFoo'
    if (arguments.length == newFoo.length) {
      console.log("a: " + a);
      console.log("b: " + b);

    // else if 'old' is a function, apply it to the arguments
    } else if (({}).toString.call(old) === '[object Function]') {
      old.apply(null, arguments);
    }
  }
})();

foo(1);
> a: 1
foo(1,2);
> a: 1
> b: 2
foo(1,2,3)
> a: 1

Singkatnya, penggunaan IIFE menciptakan ruang lingkup lokal, memungkinkan kita untuk mendefinisikan variabel pribadi olduntuk menyimpan referensi ke definisi awal fungsi foo. Fungsi ini kemudian mengembalikan fungsi inline newFooyang mencatat konten dari kedua argumen jika dilewatkan tepat dua argumen adan batau memanggil oldfungsi jika arguments.length !== 2. Pola ini dapat diulang beberapa kali untuk memberikan satu variabel dengan beberapa definisi fungsional yang berbeda.

Saya ingin membagikan contoh berguna tentang pendekatan seperti kelebihan beban.

function Clear(control)
{
  var o = typeof control !== "undefined" ? control : document.body;
  var children = o.childNodes;
  while (o.childNodes.length > 0)
    o.removeChild(o.firstChild);
}

Penggunaan: Hapus (); // Membersihkan semua dokumen

Bersihkan (myDiv); // Membersihkan panel yang direferensikan oleh myDiv

JavaScript adalah bahasa yang tidak diketik, dan saya hanya berpikir itu masuk akal untuk membebani metode / fungsi sehubungan dengan jumlah params. Oleh karena itu, saya akan merekomendasikan untuk memeriksa apakah parameternya telah ditentukan:

myFunction = function(a, b, c) {
     if (b === undefined && c === undefined ){
          // do x...
     }
     else {
          // do y...
     }
};

Pada Juli 2017, berikut ini adalah teknik umum. Perhatikan bahwa kami juga dapat melakukan pemeriksaan tipe dalam fungsi.

function f(...rest){   // rest is an array
   console.log(rest.length);
   for (v of rest) if (typeof(v)=="number")console.log(v);
}
f(1,2,3);  // 3 1 2 3

Untuk kasus penggunaan Anda, ini adalah bagaimana saya akan mengatasinya ES6(karena ini sudah akhir tahun 2017):

const foo = (x, y, z) => {
  if (y && z) {
    // Do your foo(x, y, z); functionality
    return output;
  }
  // Do your foo(x); functionality
  return output;
}

Anda dapat dengan jelas mengadaptasi ini untuk bekerja dengan sejumlah parameter dan hanya mengubah pernyataan bersyarat Anda sesuai.

tidak ada overloading aktual di JS, toh kita masih bisa mensimulasikan metode overloading dalam beberapa cara:

metode # 1: gunakan objek

function test(x,options){
  if("a" in options)doSomething();
  else if("b" in options)doSomethingElse();
}
test("ok",{a:1});
test("ok",{b:"string"});

metode # 2: gunakan parameter sisa (sebaran)

function test(x,...p){
 if(p[2])console.log("3 params passed"); //or if(typeof p[2]=="string")
else if (p[1])console.log("2 params passed");
else console.log("1 param passed");
}

Metode # 3: gunakan undefined

function test(x, y, z){
 if(typeof(z)=="undefined")doSomething();
}

metode # 4: memeriksa jenis

function test(x){
 if(typeof(x)=="string")console.log("a string passed")
 else ...
}

Meskipun parameter Default tidak kelebihan beban, ini mungkin bisa menyelesaikan beberapa masalah yang dihadapi pengembang di area ini. Input benar-benar ditentukan oleh pesanan, Anda tidak dapat memesan ulang seperti yang Anda inginkan seperti pada overloading klasik:

function transformer(
    firstNumber = 1,
    secondNumber = new Date().getFullYear(),
    transform = function multiply(firstNumber, secondNumber) {
        return firstNumber * secondNumber;
    }
) {
    return transform(firstNumber, secondNumber);
}

console.info(transformer());
console.info(transformer(8));
console.info(transformer(2, 6));
console.info(transformer(undefined, 65));

function add(firstNumber, secondNumber) {
    return firstNumber + secondNumber;
}
console.info(transformer(undefined, undefined, add));
console.info(transformer(3, undefined, add));

Hasil dalam (untuk tahun 2020):

2020
16160
12
65
2021
2023

Info lebih lanjut: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters

Opsi pertama benar-benar layak mendapat perhatian karena itu adalah hal yang saya buat dalam pengaturan kode yang cukup kompleks. Jadi, jawabanku adalah

1. Menggunakan nama yang berbeda di tempat pertama

Dengan sedikit tapi petunjuk penting, nama akan terlihat berbeda untuk komputer, tetapi tidak untuk Anda. Nama kelebihan fungsi seperti: func, func1, func2.