Pendekatan klasik (non-js) untuk overloading:

function myFunc(){
 //code
}

function myFunc(overloaded){
 //other code
}

Javascript tidak akan membiarkan lebih dari satu fungsi didefinisikan dengan nama yang sama. Karena itu, hal-hal seperti ini muncul:

function myFunc(options){
 if(options["overloaded"]){
  //code
 }
}

Apakah ada solusi yang lebih baik untuk function overloading di javascript selain meneruskan objek dengan kelebihan beban di dalamnya?

Meneruskan kelebihan beban dapat dengan cepat menyebabkan fungsi menjadi terlalu bertele-tele karena setiap kemungkinan kelebihan beban akan membutuhkan pernyataan bersyarat. Menggunakan fungsi untuk menyelesaikan bagian //codedalam pernyataan bersyarat tersebut dapat menyebabkan situasi rumit dengan cakupan.

Ada beberapa aspek untuk argumen overloading di Javascript:

1. Argumen variabel - Anda dapat meneruskan set argumen yang berbeda (baik dalam tipe maupun kuantitas) dan fungsi akan berperilaku sesuai dengan argumen yang diteruskan padanya.

2. Argumen default - Anda dapat menentukan nilai default untuk argumen jika tidak dilewatkan.

3. Argumen bernama - Urutan argumen menjadi tidak relevan dan Anda cukup memberi nama argumen yang ingin Anda teruskan ke fungsi tersebut.

Di bawah ini adalah bagian tentang masing-masing kategori penanganan argumen ini.

Argumen Variabel

Karena javascript tidak memiliki jenis pemeriksaan pada argumen atau jumlah argumen yang diperlukan, Anda hanya dapat memiliki satu implementasi myFunc()yang dapat menyesuaikan dengan argumen apa yang diteruskan kepadanya dengan memeriksa jenis, keberadaan, atau jumlah argumen.

jQuery melakukan ini sepanjang waktu. Anda bisa membuat beberapa argumen opsional atau Anda bisa bercabang di fungsi Anda tergantung pada argumen apa yang diteruskan padanya.

Dalam mengimplementasikan jenis kelebihan beban ini, Anda memiliki beberapa teknik berbeda yang dapat Anda gunakan:

1. Anda dapat memeriksa keberadaan argumen yang diberikan dengan memeriksa untuk melihat apakah nilai nama argumen yang dideklarasikan adalah undefined.
2. Anda dapat memeriksa jumlah total atau argumen dengan arguments.length.
3. Anda dapat memeriksa jenis argumen yang diberikan.
4. Untuk jumlah variabel argumen, Anda dapat menggunakan argumentspseudo-array untuk mengakses argumen yang diberikan dengan arguments[i].

Berikut beberapa contohnya:

Mari kita lihat obj.data()metode jQuery . Ini mendukung empat bentuk penggunaan yang berbeda:

obj.data("key");
obj.data("key", value);
obj.data();
obj.data(object);

Masing-masing memicu perilaku yang berbeda dan, tanpa menggunakan bentuk dinamis pemuatan berlebih ini, akan memerlukan empat fungsi terpisah.

Inilah cara seseorang dapat membedakan semua opsi ini dalam bahasa Inggris dan kemudian saya akan menggabungkan semuanya dalam kode:

// get the data element associated with a particular key value
obj.data("key");

Jika argumen pertama yang diteruskan ke .data()adalah string dan argumen kedua adalah undefined, maka pemanggil harus menggunakan formulir ini.

// set the value associated with a particular key
obj.data("key", value);

Jika argumen kedua tidak terdefinisi, maka setel nilai kunci tertentu.

// get all keys/values
obj.data();

Jika tidak ada argumen yang diberikan, kembalikan semua kunci / nilai dalam objek yang dikembalikan.

// set all keys/values from the passed in object
obj.data(object);

Jika tipe argumen pertama adalah objek biasa, maka setel semua kunci / nilai dari objek tersebut.

Inilah cara Anda dapat menggabungkan semua itu dalam satu set logika javascript:

 // method declaration for .data()
 data: function(key, value) {
     if (arguments.length === 0) {
         // .data()
         // no args passed, return all keys/values in an object
     } else if (typeof key === "string") {
         // first arg is a string, look at type of second arg
         if (typeof value !== "undefined") {
             // .data("key", value)
             // set the value for a particular key
         } else {
             // .data("key")
             // retrieve a value for a key
         }
     } else if (typeof key === "object") {
         // .data(object)
         // set all key/value pairs from this object
     } else {
         // unsupported arguments passed
     }
 },

Kunci dari teknik ini adalah untuk memastikan bahwa semua bentuk argumen yang ingin Anda terima dapat diidentifikasi secara unik dan tidak pernah ada kebingungan tentang bentuk mana yang digunakan penelepon. Ini biasanya memerlukan pengurutan argumen dengan tepat dan memastikan bahwa ada cukup keunikan dalam jenis dan posisi argumen sehingga Anda selalu dapat membedakan bentuk mana yang digunakan.

Misalnya, jika Anda memiliki fungsi yang membutuhkan tiga argumen string:

obj.query("firstArg", "secondArg", "thirdArg");

Anda bisa dengan mudah membuat argumen ketiga opsional dan Anda bisa dengan mudah mendeteksi kondisi itu, tapi Anda tidak bisa membuat hanya argumen kedua opsional karena Anda tidak bisa membedakan yang mana yang dimaksudkan pemanggil untuk diteruskan karena tidak ada cara untuk mengidentifikasi jika yang kedua. argumen dimaksudkan sebagai argumen kedua atau argumen kedua dihilangkan jadi apa yang ada di tempat argumen kedua sebenarnya adalah argumen ketiga:

obj.query("firstArg", "secondArg");
obj.query("firstArg", "thirdArg");

Karena ketiga argumen memiliki tipe yang sama, Anda tidak dapat membedakan antara argumen yang berbeda sehingga Anda tidak tahu apa yang dimaksudkan oleh pemanggil. Dengan gaya pemanggilan ini, hanya argumen ketiga yang bisa menjadi opsional. Jika Anda ingin menghilangkan argumen kedua, argumen tersebut harus diteruskan sebagai null(atau beberapa nilai lain yang dapat dideteksi) dan kode Anda akan mendeteksi bahwa:

obj.query("firstArg", null, "thirdArg");

Berikut adalah contoh jQuery dari argumen opsional. kedua argumen bersifat opsional dan menggunakan nilai default jika tidak diteruskan:

clone: function( dataAndEvents, deepDataAndEvents ) {
    dataAndEvents = dataAndEvents == null ? false : dataAndEvents;
    deepDataAndEvents = deepDataAndEvents == null ? dataAndEvents : deepDataAndEvents;

    return this.map( function () {
        return jQuery.clone( this, dataAndEvents, deepDataAndEvents );
    });
},

Berikut adalah contoh jQuery di mana argumennya bisa hilang atau salah satu dari tiga jenis berbeda yang memberi Anda empat kelebihan beban berbeda:

html: function( value ) {
    if ( value === undefined ) {
        return this[0] && this[0].nodeType === 1 ?
            this[0].innerHTML.replace(rinlinejQuery, "") :
            null;

    // See if we can take a shortcut and just use innerHTML
    } else if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
        (jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value )) &&
        !wrapMap[ (rtagName.exec( value ) || ["", ""])[1].toLowerCase() ] ) {

        value = value.replace(rxhtmlTag, "<$1></$2>");

        try {
            for ( var i = 0, l = this.length; i < l; i++ ) {
                // Remove element nodes and prevent memory leaks
                if ( this[i].nodeType === 1 ) {
                    jQuery.cleanData( this[i].getElementsByTagName("*") );
                    this[i].innerHTML = value;
                }
            }

        // If using innerHTML throws an exception, use the fallback method
        } catch(e) {
            this.empty().append( value );
        }

    } else if ( jQuery.isFunction( value ) ) {
        this.each(function(i){
            var self = jQuery( this );

            self.html( value.call(this, i, self.html()) );
        });

    } else {
        this.empty().append( value );
    }

    return this;
},

Argumen Bernama

Bahasa lain (seperti Python) memungkinkan seseorang untuk melewatkan argumen bernama sebagai sarana untuk meneruskan hanya beberapa argumen dan membuat argumen tidak tergantung pada urutan mereka diteruskan. Javascript tidak secara langsung mendukung fitur argumen bernama. Pola desain yang biasa digunakan untuk menggantikannya adalah meneruskan peta properti / nilai. Ini bisa dilakukan dengan melewatkan objek dengan properti dan nilai atau di ES6 dan di atasnya, Anda sebenarnya bisa meneruskan objek Map itu sendiri.

Berikut contoh ES5 sederhana:

jQuery $.ajax()menerima bentuk penggunaan di mana Anda hanya meneruskannya satu parameter yang merupakan objek Javascript biasa dengan properti dan nilai. Properti mana yang Anda teruskan menentukan argumen / opsi mana yang diteruskan ke panggilan ajax. Beberapa mungkin diperlukan, banyak yang opsional. Karena mereka adalah properti pada suatu objek, tidak ada urutan tertentu. Faktanya, ada lebih dari 30 properti berbeda yang dapat diteruskan pada objek itu, hanya satu (url) yang diperlukan.

Berikut contohnya:

$.ajax({url: "http://www.example.com/somepath", data: myArgs, dataType: "json"}).then(function(result) {
    // process result here
});

Di dalam $.ajax()implementasi, ia kemudian dapat menginterogasi properti mana yang diteruskan pada objek yang masuk dan menggunakannya sebagai argumen bernama. Ini bisa dilakukan dengan for (prop in obj)atau dengan memasukkan semua properti ke dalam larik dengan Object.keys(obj)dan kemudian mengiterasi larik itu.

Teknik ini sangat umum digunakan di Javascript ketika ada banyak argumen dan / atau banyak argumen bersifat opsional. Catatan: ini memberi tanggung jawab pada fungsi implementasi untuk memastikan bahwa ada sekumpulan argumen valid minimal dan untuk memberi pemanggil beberapa umpan balik debug apa yang hilang jika argumen yang diteruskan tidak mencukupi (mungkin dengan membuat pengecualian dengan pesan kesalahan yang membantu) .

Dalam lingkungan ES6, dimungkinkan untuk menggunakan destructuring untuk membuat properti / nilai default untuk objek yang diteruskan di atas. Ini dibahas lebih rinci dalam artikel referensi ini .

Inilah salah satu contoh dari artikel itu:

function selectEntries({ start=0, end=-1, step=1 } = {}) {
    ···
};

Ini membuat properti dan nilai default untuk start, enddan stepproperti pada objek yang diteruskan ke selectEntries()fungsi.

Nilai default untuk argumen fungsi

Di ES6, Javascript menambahkan dukungan bahasa bawaan untuk nilai default untuk argumen.

Sebagai contoh:

function multiply(a, b = 1) {
  return a*b;
}

multiply(5); // 5

Penjelasan lebih lanjut tentang cara ini dapat digunakan di sini di MDN .

Membebani suatu fungsi di JavaScript dapat dilakukan dengan banyak cara. Semuanya melibatkan satu fungsi master yang melakukan semua proses, atau mendelegasikan ke sub-fungsi / proses.

Salah satu teknik sederhana yang paling umum melibatkan sakelar sederhana:

function foo(a, b) {
    switch (arguments.length) {
    case 0:
        //do basic code
        break;
    case 1:
        //do code with `a`
        break;
    case 2:
    default:
        //do code with `a` & `b`
        break;
    }
}

Teknik yang lebih elegan adalah menggunakan array (atau objek jika Anda tidak membuat kelebihan beban untuk setiap jumlah argumen):

fooArr = [
    function () {
    },
    function (a) {
    },
    function (a,b) {
    }
];
function foo(a, b) {
    return fooArr[arguments.length](a, b);
}

Contoh sebelumnya tidak terlalu elegan, siapa pun dapat memodifikasi fooArr, dan akan gagal jika seseorang memberikan lebih dari 2 argumen ke foo, jadi bentuk yang lebih baik adalah menggunakan pola modul dan beberapa pemeriksaan:

var foo = (function () {
    var fns;
    fns = [
        function () {
        },
        function (a) {
        },
        function (a, b) {
        }
    ];
    function foo(a, b) {
        var fnIndex;
        fnIndex = arguments.length;
        if (fnIndex > foo.length) {
            fnIndex = foo.length;
        }
        return fns[fnIndex].call(this, a, b);
    }
    return foo;
}());

Tentu saja kelebihan Anda mungkin ingin menggunakan sejumlah parameter dinamis, sehingga Anda dapat menggunakan objek untuk fnskoleksi.

var foo = (function () {
    var fns;
    fns = {};
    fns[0] = function () {
    };
    fns[1] = function (a) {
    };
    fns[2] = function (a, b) {
    };
    fns.params = function (a, b /*, params */) {
    };
    function foo(a, b) {
        var fnIndex;
        fnIndex = arguments.length;
        if (fnIndex > foo.length) {
            fnIndex = 'params';
        }
        return fns[fnIndex].apply(this, Array.prototype.slice.call(arguments));
    }
    return foo;
}());

Preferensi pribadi saya cenderung menjadi switch, meskipun itu meningkatkan fungsi utama. Contoh umum tempat saya menggunakan teknik ini adalah metode accessor / mutator:

function Foo() {} //constructor
Foo.prototype = {
    bar: function (val) {
        switch (arguments.length) {
        case 0:
            return this._bar;
        case 1:
            this._bar = val;
            return this;
        }
    }
}

Anda tidak dapat melakukan overloading metode dalam arti yang sempit. Tidak seperti cara itu didukung javaatau c#.

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

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

Katakanlah Anda punya metode

function foo(x)
{
} 

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

fooNew(x,y,z)
{
}

dan kemudian ubah fungsi pertama sebagai berikut -

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

Jika Anda memiliki banyak metode kelebihan beban, pertimbangkan untuk menggunakan lebih switchdari sekedar if-elsepernyataan.

( lebih detail ) NB: Tautan di atas menuju ke blog pribadi saya yang memiliki detail tambahan tentang ini.

Saya menggunakan pendekatan overloading yang sedikit berbeda berdasarkan nomor argumen. Namun saya yakin pendekatan John Fawcett juga bagus. Berikut contoh, kode berdasarkan penjelasan John Resig (jQuery's Author).

// o = existing object, n = function name, f = function.
    function overload(o, n, f){
        var old = o[n];
        o[n] = function(){
            if(f.length == arguments.length){
                return f.apply(this, arguments);
            }
            else if(typeof o == 'function'){
                return old.apply(this, arguments);
            }
        };
    }

kegunaan:

var obj = {};
overload(obj, 'function_name', function(){ /* what we will do if no args passed? */});
overload(obj, 'function_name', function(first){ /* what we will do if 1 arg passed? */});
overload(obj, 'function_name', function(first, second){ /* what we will do if 2 args passed? */});
overload(obj, 'function_name', function(first,second,third){ /* what we will do if 3 args passed? */});
//... etc :)

Dalam javascript Anda dapat mengimplementasikan fungsi hanya sekali dan menjalankan fungsi tanpa parameter myFunc() Anda kemudian memeriksa untuk melihat apakah opsi 'tidak ditentukan'

function myFunc(options){
 if(typeof options != 'undefined'){
  //code
 }
}

Saya mencoba mengembangkan solusi elegan untuk masalah ini yang dijelaskan di sini . Dan Anda dapat menemukan demo di sini . Penggunaannya terlihat seperti ini:

var out = def({
    'int': function(a) {
        alert('Here is int '+a);
    },

    'float': function(a) {
        alert('Here is float '+a);
    },

    'string': function(a) {
        alert('Here is string '+a);
    },

    'int,string': function(a, b) {
        alert('Here is an int '+a+' and a string '+b);
    },
    'default': function(obj) {
        alert('Here is some other value '+ obj);
    }

});

out('ten');
out(1);
out(2, 'robot');
out(2.5);
out(true);

Metode yang digunakan untuk mencapai ini:

var def = function(functions, parent) {
 return function() {
    var types = [];
    var args = [];
    eachArg(arguments, function(i, elem) {
        args.push(elem);
        types.push(whatis(elem));
    });
    if(functions.hasOwnProperty(types.join())) {
        return functions[types.join()].apply(parent, args);
    } else {
        if (typeof functions === 'function')
            return functions.apply(parent, args);
        if (functions.hasOwnProperty('default'))
            return functions['default'].apply(parent, args);        
    }
  };
};

var eachArg = function(args, fn) {
 var i = 0;
 while (args.hasOwnProperty(i)) {
    if(fn !== undefined)
        fn(i, args[i]);
    i++;
 }
 return i-1;
};

var whatis = function(val) {

 if(val === undefined)
    return 'undefined';
 if(val === null)
    return 'null';

 var type = typeof val;

 if(type === 'object') {
    if(val.hasOwnProperty('length') && val.hasOwnProperty('push'))
        return 'array';
    if(val.hasOwnProperty('getDate') && val.hasOwnProperty('toLocaleTimeString'))
        return 'date';
    if(val.hasOwnProperty('toExponential'))
        type = 'number';
    if(val.hasOwnProperty('substring') && val.hasOwnProperty('length'))
        return 'string';
 }

 if(type === 'number') {
    if(val.toString().indexOf('.') > 0)
        return 'float';
    else
        return 'int';
 }

 return type;
};

https://github.com/jrf0110/leFunc

var getItems = leFunc({
  "string": function(id){
    // Do something
  },
  "string,object": function(id, options){
    // Do something else
  },
  "string,object,function": function(id, options, callback){
    // Do something different
    callback();
  },
  "object,string,function": function(options, message, callback){
    // Do something ca-raaaaazzzy
    callback();
  }
});

getItems("123abc"); // Calls the first function - "string"
getItems("123abc", {poop: true}); // Calls the second function - "string,object"
getItems("123abc", {butt: true}, function(){}); // Calls the third function - "string,object,function"
getItems({butt: true}, "What what?" function(){}); // Calls the fourth function - "object,string,function"

Tidak Ada Masalah dengan Overloading di JS, pb bagaimana cara menjaga kode yang bersih saat fungsi overloading?

Anda dapat menggunakan penerusan untuk memiliki kode yang bersih, berdasarkan dua hal:

1. Jumlah argumen (saat memanggil fungsi).

2. Jenis argumen (saat memanggil fungsi)

     function myFunc(){
         return window['myFunc_'+arguments.length+Array.from(arguments).map((arg)=>typeof arg).join('_')](...arguments);
      }
   
       /** one argument & this argument is string */
     function myFunc_1_string(){
   
     }
      //------------
      /** one argument & this argument is object */
     function myFunc_1_object(){
   
     }
     //----------
     /** two arguments & those arguments are both string */
     function myFunc_2_string_string(){
   
     }
      //--------
     /** Three arguments & those arguments are : id(number),name(string), callback(function) */
     function myFunc_3_number_string_function(){
               let args=arguments;
                 new Person(args[0],args[1]).onReady(args[3]);
     }
   
      //--- And so on ....   

Lihat ini:

http://www.codeproject.com/Articles/688869/Overloading-JavaScript-Functions

Pada dasarnya di kelas Anda, Anda memberi nomor pada fungsi Anda yang ingin kelebihan beban dan kemudian dengan satu panggilan fungsi Anda menambahkan fungsi kelebihan beban, cepat dan mudah.

Karena JavaScript tidak memiliki fungsi opsi kelebihan beban , objek 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 diisi 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 + "}";

}

berikut adalah contoh bagaimana menggunakan objek opsi

Untuk ini, Anda perlu membuat fungsi yang menambahkan fungsi ke objek, kemudian akan dijalankan tergantung pada jumlah argumen yang Anda kirim ke fungsi:

<script > 
//Main function to add the methods
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);
  };
}


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

//Here we declare the first function with no arguments passed
  addMethod(ninjas, "find", function(){
    return this.values;
});

//Second function with one argument
  addMethod(ninjas, "find", function(name){
    var ret = [];
    for (var i = 0; i < this.values.length; i++)
      if (this.values[i].indexOf(name) == 0)
        ret.push(this.values[i]);
    return ret;
  });

//Third function with two arguments
  addMethod(ninjas, "find", function(first, last){
    var ret = [];
    for (var i = 0; i < this.values.length; i++)
      if (this.values[i] == (first + " " + last))
        ret.push(this.values[i]);
    return ret;
  });


//Now you can do:
ninjas.find();
ninjas.find("Sam");
ninjas.find("Dean", "Edwards")
</script>

Saya ingin menambahkan sub fungsi dalam fungsi induk untuk mencapai kemampuan membedakan antara grup argumen untuk fungsi yang sama.

var doSomething = function() {
    var foo;
    var bar;
};

doSomething.withArgSet1 = function(arg0, arg1) {
    var obj = new doSomething();
    // do something the first way
    return obj;
};

doSomething.withArgSet2 = function(arg2, arg3) {
    var obj = new doSomething();
    // do something the second way
    return obj;
};

Apa yang ingin Anda capai paling baik dilakukan dengan menggunakan variabel argumen lokal fungsi .

function foo() {
    if (arguments.length === 0) {
        //do something
    }
    if (arguments.length === 1) {
        //do something else
    }
}

foo(); //do something
foo('one'); //do something else

Anda dapat menemukan penjelasan yang lebih baik tentang cara kerjanya di sini .