javascript - questions - जावास्क्रिप्ट में कार्यों को अधिभार कैसे करें?




javascript programs (9)

जेएस में ओवरलोडिंग के साथ कोई समस्या नहीं, पीबी कैसे ओवरलोडिंग समारोह को साफ कोड बनाए रखने के लिए?

आप दो चीजों के आधार पर स्वच्छ कोड रखने के लिए आगे का उपयोग कर सकते हैं:

  1. तर्कों की संख्या (फ़ंक्शन को कॉल करते समय)।
  2. तर्कों का प्रकार (जब फ़ंक्शन कॉल करें)

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

ओवरलोडिंग के लिए शास्त्रीय (गैर-जेएस) दृष्टिकोण:

function myFunc(){
 //code
}

function myFunc(overloaded){
 //other code
}

जावास्क्रिप्ट एक ही नाम से एक से अधिक फ़ंक्शन परिभाषित नहीं होने देगा। इस तरह, इस तरह की चीजें दिखाती हैं:

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

किसी ऑब्जेक्ट को ओवरलोड के साथ पास करने के अलावा जावास्क्रिप्ट में फंक्शन ओवरलोडिंग के लिए बेहतर कामकाज है?

ओवरलोड में गुजरने से फ़ंक्शन को वर्बोज़ बनने का कारण बन सकता है क्योंकि प्रत्येक संभावित अधिभार को सशर्त कथन की आवश्यकता होती है। //code सशर्त बयानों //code अंदर //code को पूरा करने के लिए फ़ंक्शंस का उपयोग करने से स्कॉप्स के साथ मुश्किल परिस्थितियां हो सकती हैं।


आप सख्ती से विधि अधिभार नहीं कर सकते हैं। java या c# में जिस तरह से समर्थित है उसे पसंद नहीं है।

मुद्दा यह है कि जावास्क्रिप्ट विधिवत ओवरलोडिंग का समर्थन नहीं करता है। इसलिए, यदि यह एक ही नाम के साथ दो या दो से अधिक कार्यों को देखता / पार्स करता है तो यह केवल अंतिम परिभाषित फ़ंक्शन पर विचार करेगा और पिछले लोगों को ओवरराइट करेगा।

जिस तरह से मुझे लगता है कि ज्यादातर मामलों के लिए उपयुक्त है, निम्नानुसार है -

मान लें कि आपके पास विधि है

function foo(x)
{
} 

जावास्क्रिप्ट में संभव नहीं है जो ओवरलोडिंग विधि के बजाय आप एक नई विधि को परिभाषित कर सकते हैं

fooNew(x,y,z)
{
}

और फिर निम्न कार्य को निम्नानुसार संशोधित करें -

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

यदि आपके पास ऐसी कई ओवरलोडेड विधि हैं, तो बस if-else कथन के मुकाबले switch का उपयोग switch पर विचार करें।

( अधिक जानकारी )


इसके लिए आपको एक फ़ंक्शन बनाने की आवश्यकता है जो फ़ंक्शन को ऑब्जेक्ट में जोड़ती है, फिर यह फ़ंक्शन पर भेजे गए तर्कों की मात्रा के आधार पर निष्पादित होगी:

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

चूंकि जावास्क्रिप्ट में फ़ंक्शन ओवरलोड विकल्प ऑब्जेक्ट नहीं है, इसके बजाए इसका उपयोग किया जा सकता है। यदि एक या दो आवश्यक तर्क हैं, तो उन्हें विकल्प ऑब्जेक्ट से अलग रखना बेहतर है। विकल्प ऑब्जेक्ट में मान पास नहीं होने पर विकल्प ऑब्जेक्ट और पॉप्युलेट मानों को डिफ़ॉल्ट मान पर कैसे उपयोग करें, इस पर एक उदाहरण दिया गया है।

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 + "}";

}

विकल्प ऑब्जेक्ट का उपयोग करने के तरीके पर एक उदाहरण दिया गया है


जावास्क्रिप्ट में एक फ़ंक्शन ओवरलोड करना कई तरीकों से किया जा सकता है। उनमें से सभी में एक मास्टर फ़ंक्शन शामिल होता है जो या तो सभी प्रक्रियाओं, या प्रतिनिधियों को उप-कार्य / प्रक्रियाओं में करता है।

सबसे आम सरल तकनीकों में से एक में एक साधारण स्विच शामिल है:

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

एक और अधिक सुरुचिपूर्ण तकनीक एक सरणी का उपयोग करना होगा (या ऑब्जेक्ट यदि आप प्रत्येक तर्क गणना के लिए ओवरलोड नहीं कर रहे हैं):

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

वह पिछला उदाहरण बहुत ही सुरुचिपूर्ण नहीं है, कोई भी fooArr को संशोधित कर सकता है, और यदि कोई foo को 2 से अधिक तर्कों में गुजरता है तो यह विफल हो जाएगा, इसलिए मॉड्यूल पैटर्न और कुछ चेक का उपयोग करने के लिए एक बेहतर रूप होगा:

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

बेशक आपके fns गतिशील संख्याओं का उपयोग करना चाहते हैं, ताकि आप fns संग्रह के लिए किसी ऑब्जेक्ट का उपयोग कर सकें।

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

मेरी निजी वरीयता switch होने लगती है, हालांकि यह मास्टर फ़ंक्शन को बड़ा करता है। इस तकनीक का उपयोग करने का एक आम उदाहरण एक एक्सेसर / म्यूटेटर विधि होगा:

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

जावास्क्रिप्ट में तर्क ओवरलोडिंग के कई पहलू हैं:

  1. परिवर्तनीय तर्क - आप तर्कों के विभिन्न सेट (दोनों प्रकार और मात्रा में) पारित कर सकते हैं और फ़ंक्शन इस तरह से व्यवहार करेगा जो इसे पारित तर्कों से मेल खाता है।

  2. डिफ़ॉल्ट तर्क - यदि आप पारित नहीं होते हैं तो आप तर्क के लिए डिफ़ॉल्ट मान परिभाषित कर सकते हैं।

  3. नामांकित तर्क - तर्क आदेश अप्रासंगिक हो जाता है और आप केवल उस तर्क का नाम देते हैं जिसे आप फ़ंक्शन में पास करना चाहते हैं।

नीचे तर्क प्रबंधन की इन श्रेणियों में से प्रत्येक पर एक अनुभाग है।

परिवर्तनीय तर्क

चूंकि जावास्क्रिप्ट में तर्कों या तर्कों की आवश्यक मात्रा पर कोई प्रकार की जांच नहीं होती है, इसलिए आप केवल myFunc() का एक कार्यान्वयन कर सकते हैं जो कि तर्क, उपस्थिति या तर्कों की मात्रा को जांचकर उस तर्क को पारित कर सकता है।

jQuery यह हर समय करता है। आप कुछ तर्क वैकल्पिक बना सकते हैं या आप अपने फ़ंक्शन में शाखाओं को किस तर्क के पारित कर सकते हैं इसके आधार पर शाखा बना सकते हैं।

इन प्रकार के ओवरलोड को लागू करने में, आपके पास कई अलग-अलग तकनीकें हैं जिनका आप उपयोग कर सकते हैं:

  1. आप यह देखने के लिए किसी दिए गए तर्क की उपस्थिति की जांच कर सकते हैं कि घोषित तर्क नाम मान undefined
  2. आप तर्कों के साथ कुल मात्रा या तर्क की जांच कर सकते हैं। arguments.length
  3. आप किसी दिए गए तर्क के प्रकार की जांच कर सकते हैं।
  4. तर्कों की परिवर्तनीय संख्याओं के लिए, आप तर्कों के साथ दिए गए तर्क तक पहुंचने के लिए arguments छद्म-सरणी का उपयोग कर सकते हैं arguments[i]

यहाँ कुछ उदाहरण हैं:

आइए jQuery की obj.data() विधि देखें। यह उपयोग के चार अलग-अलग रूपों का समर्थन करता है:

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

प्रत्येक एक अलग व्यवहार को ट्रिगर करता है और ओवरलोडिंग के इस गतिशील रूप का उपयोग किए बिना, चार अलग-अलग कार्यों की आवश्यकता होती है।

यहां बताया गया है कि अंग्रेजी में इन सभी विकल्पों के बीच कोई कैसे समझ सकता है और फिर मैं उन्हें कोड में जोड़ दूंगा:

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

यदि .data() को पास किया गया पहला तर्क एक स्ट्रिंग है और दूसरा तर्क undefined , तो कॉलर इस फ़ॉर्म का उपयोग करना होगा।

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

यदि दूसरा तर्क अपरिभाषित नहीं है, तो किसी विशेष कुंजी का मान सेट करें।

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

यदि कोई तर्क पारित नहीं होता है, तो लौटाए गए ऑब्जेक्ट में सभी कुंजी / मान वापस कर दें।

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

यदि पहला तर्क का प्रकार एक सादा वस्तु है, तो उस ऑब्जेक्ट से सभी कुंजी / मान सेट करें।

यहां बताया गया है कि आप जावास्क्रिप्ट तर्क के एक सेट में उन सभी को कैसे जोड़ सकते हैं:

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

इस तकनीक की कुंजी यह सुनिश्चित करना है कि आप जिन तर्कों को स्वीकार करना चाहते हैं वे विशिष्ट रूप से पहचाने जाने योग्य हैं और कॉलर का उपयोग किस प्रकार के बारे में कोई भ्रम नहीं है। आम तौर पर तर्कों को उचित तरीके से आदेश देने और यह सुनिश्चित करने की आवश्यकता होती है कि तर्कों के प्रकार और स्थिति में पर्याप्त विशिष्टता है जिसे आप हमेशा बता सकते हैं कि किस फ़ॉर्म का उपयोग किया जा रहा है।

उदाहरण के लिए, यदि आपके पास कोई फ़ंक्शन है जो तीन स्ट्रिंग तर्क लेता है:

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

आप आसानी से तीसरे तर्क को वैकल्पिक बना सकते हैं और आप आसानी से उस स्थिति का पता लगा सकते हैं, लेकिन आप केवल दूसरा तर्क वैकल्पिक नहीं बना सकते हैं क्योंकि आप यह नहीं बता सकते कि इनमें से कौन सा कॉलर गुज़रने का मतलब है क्योंकि दूसरा पहचानने का कोई तरीका नहीं है तर्क दूसरा तर्क माना जाता है या दूसरा तर्क छोड़ दिया गया था, तो दूसरे तर्क के स्थान में क्या वास्तव में तीसरा तर्क है:

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

चूंकि सभी तीन तर्क एक ही प्रकार के हैं, इसलिए आप विभिन्न तर्कों के बीच अंतर नहीं बता सकते हैं, इसलिए आप नहीं जानते कि कॉलर का क्या इरादा है। इस कॉलिंग शैली के साथ, केवल तीसरा तर्क वैकल्पिक हो सकता है। यदि आप दूसरे तर्क को छोड़ना चाहते हैं, तो उसे इसके बजाय null (या कुछ अन्य पता लगाने योग्य मान) के रूप में पारित करना होगा और आपका कोड यह पता लगाएगा कि:

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

वैकल्पिक तर्कों का एक jQuery उदाहरण यहां दिया गया है। दोनों तर्क वैकल्पिक हैं और पास नहीं होने पर डिफ़ॉल्ट मानों पर लेते हैं:

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

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

यहां एक jQuery उदाहरण दिया गया है जहां तर्क गुम हो सकता है या तीन अलग-अलग प्रकारों में से एक जो आपको चार अलग-अलग अधिभार देता है:

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

नामांकित तर्क

अन्य भाषाएं (जैसे पायथन) किसी को कुछ तर्कों को पारित करने के साधन के रूप में नामित तर्कों को पारित करने और उनके द्वारा पारित किए गए आदेश से स्वतंत्र तर्क बनाने की अनुमति देता है। जावास्क्रिप्ट सीधे नामांकित तर्कों की सुविधा का समर्थन नहीं करता है। आमतौर पर इसके स्थान पर उपयोग किया जाने वाला एक डिज़ाइन पैटर्न गुण / मानों का नक्शा पास करना है। यह किसी ऑब्जेक्ट को गुणों और मानों या ईएस 6 और ऊपर के साथ पास करके किया जा सकता है, आप वास्तव में एक मानचित्र ऑब्जेक्ट को पास कर सकते हैं।

यहां एक साधारण ES5 उदाहरण दिया गया है:

jQuery का $.ajax() उपयोग के एक रूप को स्वीकार करता है जहां आप इसे केवल एक पैरामीटर पास करते हैं जो नियमित जावास्क्रिप्ट ऑब्जेक्ट गुणों और मानों के साथ होता है। आप कौन सी संपत्तियों को पारित करते हैं यह निर्धारित करते हैं कि AJAX कॉल में कौन से तर्क / विकल्प पारित किए जा रहे हैं। कुछ की आवश्यकता हो सकती है, कई वैकल्पिक हैं। चूंकि वे किसी ऑब्जेक्ट पर गुण हैं, इसलिए कोई विशिष्ट ऑर्डर नहीं है। वास्तव में, उस वस्तु पर 30 से अधिक विभिन्न गुण पारित किए जा सकते हैं, केवल एक (यूआरएल) आवश्यक है।

यहां एक उदाहरण दिया गया है:

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

$.ajax() कार्यान्वयन के अंदर, यह केवल पूछताछ कर सकता है कि आने वाली वस्तु पर कौन से गुण पारित किए गए थे और नामित तर्कों के रूप में उनका उपयोग करें। यह या तो Object.keys(obj) साथ सरणी में सभी गुणों को प्राप्त करने के लिए या फिर सरणी को फिर से Object.keys(obj) साथ किया जा सकता है।

इस तकनीक का प्रयोग जावास्क्रिप्ट में बहुत सामान्य रूप से किया जाता है जब बड़ी संख्या में तर्क होते हैं और / या कई तर्क वैकल्पिक होते हैं। नोट: यह सुनिश्चित करने के लिए कार्यान्वयन फ़ंक्शन पर एक ऑनस डालता है कि तर्कों का एक न्यूनतम मान्य सेट मौजूद है और कॉलर को कुछ डीबग फीडबैक देने के लिए जो अपर्याप्त तर्क पारित हो जाते हैं (शायद एक उपयोगी त्रुटि संदेश के साथ अपवाद फेंक कर) ।

ईएस 6 पर्यावरण में, उपर्युक्त पारित वस्तु के लिए डिफ़ॉल्ट गुण / मान बनाने के लिए विनाशकारी का उपयोग करना संभव है। इस संदर्भ आलेख में अधिक विस्तार से चर्चा की गई है।

उस आलेख से यहां एक उदाहरण दिया गया है:

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

यह selectEntries() फ़ंक्शन को पारित ऑब्जेक्ट पर start , end और step गुणों के लिए डिफ़ॉल्ट गुण और मान बनाता है।

फ़ंक्शन तर्कों के लिए डिफ़ॉल्ट मान

ES6 में, जावास्क्रिप्ट तर्कों के लिए डिफ़ॉल्ट मानों के लिए अंतर्निहित भाषा समर्थन जोड़ता है।

उदाहरण के लिए:

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

multiply(5); // 5

यहां एमडीएन पर इसका इस्तेमाल किया जा सकता है।


मैं तर्क संख्या के आधार पर थोड़ा अलग ओवरलोडिंग दृष्टिकोण का उपयोग कर रहा हूं। हालांकि मुझे विश्वास है कि जॉन फावसेट का दृष्टिकोण भी अच्छा है। यहां उदाहरण, जॉन रेजिग (jQuery के लेखक) स्पष्टीकरण के आधार पर कोड।

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

प्रयोज्य:

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 :)

मैं समान कार्यक्षमता के लिए तर्क समूहों के बीच अंतर करने की क्षमता प्राप्त करने के लिए एक मूल कार्य के भीतर उप कार्यों को जोड़ना चाहता हूं।

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

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"





javascript