Function Properties and Methods in JavaScript

Function Properties and Methods in JavaScript – जैसाकि हमने पहले भी कहा कि ECMAScript में Functions वास्तव में Objects होते हैं। इसलिए जिस तरह से सामान्‍य Objects के Properties व Methods होते हैं, उसी तरह से किसी Function Object के भी Properties व Methods होते हैं। ECMAScript में Define किए जाने वाले सभी Function की दो मूल Properties होती हैं: length और prototype

Function की length Property Function में Specify किए गए कुल Named Arguments की संख्‍या को Specify करता है जबकि prototype Property ECMAScript की एक बहुत ही Special Property होती है, जिसके बारे में हम थोडी देर बाद जानेंगे।

Function Object की length Property को हम निम्नानुसार उपयोग में लेकर ये जान सकते हैं कि किसी Function में कुल कितने Named Arguments को Specify किया गया है:

[code]
      function sayName(name){
            alert(name);
      }

      function sum(num1, num2){
            return num1 + num2;
      }

      function sayHi(){
            alert(“hi”);
      }

      alert(sayName.length);       // Output: 1
      alert(sum.length);           // Output: 2
      alert(sayHi.length);         // Output: 0
[/code]

उपरोक्त Code में हमने sayName, sum व sayHi नाम के तीन Functions Create किए हैं। जब हम alert Function में इन तीनों Functions की Length Property को Display करते हैं, तो जैसाकि हम उपरोक्त Code के Output में देख सकते हैं कि sayName Function के लिए 1, sum के लिए 2 व sayHi के लिए 0 Return होता है।

क्योंकि sayName Function में name नाम का केवल एक Named Argument Specify किया गया है, sum नाम के Function में num1 व num2 नाम के दो Named Arguments Specify किए गए हैं जबकि sayHi नाम के Function में एक भी Named Argument Specify नहीं किया गया है।

किसी भी Function की दूसरी Special Property prototype Property होती है। prototype Property, किसी भी Function के सभी Reference Types के Instance Methods की Actual Location होती है।

यानी किसी Reference Type जैसे कि Object, Array आदि के toString() व valueOf() आदि Methods वास्तव में prototype में Exist होते हैं और जब किसी Object Instance के साथ किसी Method को Call किया जाता है, तो ये Methods यहीं से Access होते हैं। ये Property उस स्थिति में बहुत महत्वपूर्ण हो जाती है, जब हम JavaScript में Inheritance की सुविधा प्राप्त करना चाहते हैं अथवा अपना स्वयं का Reference Type बनाना चाहते हैं।

इन दो Properties के अलावा हर Function Object में apply() व call() नाम के दो Special Methods भी होते हैं। ये दोनों Method किसी Function को this द्वारा Refer करके एक Specific Scope में Call करने की सुविधा देते हैं। यानी इन दोनों Methods का प्रयोग करते हुए हम किसी Function को this के रूप में Pass करके उस Function को एक Specific Scope में Call कर सकते हैं।

apply() Method दो Arguments Accept करता है। पहला Argument उस Scope को Specify करता है, जिसमें Function Run होना चाहिए जबकि दूसरा Argument, Arguments का एक Array होता है। दूसरे Argument के रूप में हम किसी Array Instance को भी Pass कर सकते हैं, लेकिन ये arguments Object भी हो सकता है। इस Function को समझने के लिए हम निम्न उदाहरण देख सकते हैं:

[code]
function sum(val1, val2){
      return val1 + val2;
}

function callSum1(num1, num2){
      return sum.apply(this, arguments);    //passing in arguments object
}

function callSum2(num1, num2){
      return sum.apply(this, [num1, num2]); //passing in array
}

alert(callSum1(10,10));                     //Output:20
alert(callSum2(10,10));                     //Output: 20
[/code]

इस उदाहरण में हमने sum, callSum1 व callSum2 नाम के तीन Methods Create क, हैं। sum Method Arguments के रूप में आने वाले दो मानों को आपस में जोडता है और Result को Return करता है। जबकि callSum1 व callSum2 Methods इस sum Method को ही Call करते हैं, लेकिन Function के Local Scope में।

जब पहला alert() Function Execute होता है, तब callSum1 Method Execute होता है, जो कि Argument के रूप में num1 व num2 Named Arguments में मान 10 प्राप्त करता है। फिर इस Method के अन्दर sum Method को Call किया जाता है, लेकिन sum Method को apply Method के साथ Call किया जाता है, जिससे sum Method केवल इसी Function के Scope में Execute होता है क्योंकि sum.apply Method में पहले Argument के रूप में this Object Pass किया गया है, जो कि callSum1 Method को ही Function के Reference के रूप में Pass करता है।

चूंकि sum.apply Method में callSum1 Method को Pass किया जा रहा है, जिसके स्वयं के दो Arguments num1 व num2 हैं। इसलिए इन Arguments को भी sum.apply Method के दूसरे Argument के रूप में arguments Object द्वारा Pass किया जा रहा है।

जब ये दोनों Arguments sum.apply Method में Pass किए जाते हैं, तब sum Method Execute होता है और callSum1 Method के दोनों Arguments को val1 व val2 में प्राप्त करता है साथ ही इन दोनों मानों को जोडकर फिर से callSum1 Method को Return कर देता है। परिणामस्वरूप callSum1 Method में num1 व num2 मानों का योग आ जाता है लेकिन sum Function के Through.

जैसे ही दोनों संख्‍याओं का जोड callSum1 Function में आता है, ये Function भी इस Return होने वाले जोड के Result को alert() Function को Return कर देता है और alert() Method आने वाले Result को Display कर देता है।

यही प्रक्रिया callSum2 Method में भी होती है, लेकिन इस Method में पहले Argument के रूप में फिर से Specify किया गया this इस बार callSum2 Method के Reference को Pass करता है, क्योंकि इस समय this Current Function को ही Refer करता है क्योंकि Current Function ही Current Execution Context है। साथ ही इस बार दूसरे Argument के रूप में दोनों Arguments एक Array के रूप में Pass होते हैं, न कि arguments Object के रूप में।

callSum1 व callSum2 दोनों ही Methods अपने स्वयं के Scope में sum Function को Call करने के लिए sum.apply() Method को Use करते हैं, न कि Directly sum Method को क्योंकि sum Method Current Window में होने की वजह से Global Context में है।

इस Program में apply() Method की कोई विशेष उपयोगिता दिखाई नहीं दे रही है, लेकिन जब हम JavaScript को Object Oriented Form में Use करते हैं, apply() Method को Use करना जरूरी हो जाता है। इस विष; में हम आगे और जानेंगे।

apply() Method की तरह ही हम किसी Function Object के call() Method को भी उपयोग में ले सकते हैं और ये Method भी Local Context में किसी Function को Call करने के लिए ही Use किए जाते हैं। लेकिन इस Method में Arguments थोडा अलग तरीके से Pas किए जाते हैं।

apply() Method की तरह ही इस Method में भी पहला Argument Scope को Represent करता है, लेकिन अन्‍य Arguments को Directly Called Method में Pass किया जाता है, न कि Arguments अथवा Array Object के माध्‍यम से।

[code]
function sum(val1, val2){
      return num1 + num2;
}

function callSum(num1, num2){
      return sum.call(this, num1, num2);
}

alert(callSum(10,10));           //Output: 20
[/code]

जैसाकि हम देख सकते हैं कि ये Code Segment बिल्कुल पहले वाले Code Segment की तरह ही दिखाई दे रहा है और Execute भी Exactly पिछले वाले Code Segment की तरह ही होता है।

अन्तर केवल इतना है कि इस Code Segment में हमने apply() के स्थान पर call() Method को Use किया है तथा दूसरे Argument के रूप में हमने arguments Object या Array के बजाय Directly Values को Specify किया है, जो कि इस Method को Use करने के लिए जरूरी है।

हम apply() Method को Use करते हैं या call() Method को] ये बात पूरी तरह से हमारी सुविधा पर निर्भर करता है। क्योंकि ये दोनों ही Methods समान प्रकार से काम करते हैं और यदि हम इन दोनों Methods में कोई Argument Pass न करें, तो उस स्थिति में ये दोनों ही Methods Exactly समान प्रकार के दिखाई देते हैं।

apply() व call() दोनों ही Methods की Power इनके Arguments को अलग-अलग तरीके से Pass करने की क्षमता पर आधारित नहीं है, बल्कि उस Scope पर आधारित है, जिसमें इनके Codes Run होते हैं। इसे समझने के लिए हम निम्न उदाहरण देखते हैं:

[code]
window.color = “red”;
var obj = { color: “blue”};

function getColor() {
      alert (this.color);
}

getColor();               // Output: red
getColor.call(this);      // Output: red
getColor.call(window);    // Output: red
getColor.call(obj);       // Output: blue
[/code]

इस Code Segment में जब पहली बार getColor() Method को Call किया जाता है, तब वह “red” Return करता है। क्योंकि हमने इस Method को Global Context में Call किया है और color नाम की एक Property Global Context में भी है, जिसमें “red” मान Stored है।

दूसरी बार getColor() Method को call() Method के साथ Call किया है व उसमें Argument के रूप में this Object Pass किया है। चूंकि getColor() Method Currently Global Scope में है क्योंकि हमने इस Method को Globally Define किया है, इसलिए this Object Global Context को ही Represent करता है और Result के रूप में हमें फिर से Global Context में Specify किए गए color Property के मान “red” को Return करता है।

तीसरी बार getColor() Method को call() Method के साथ Call करते समय हमनें call() Method में Argument के रूप में window Object Pass किया है। चूंकि किसी भी Web Browser का window Object उसके Global Context को ही Represent करता है, इसलिए इस बार भी Output के रूप में हमें “red” ही प्राप्त होता है क्योंकि इस बार भी call() Method के First Argument में Specify किया गया this Object,Global Context को ही Represent कर रहा है और Global Context की color Property के मान को ही Display कर देता है।

अन्तिम getColor() Method को call() Method के साथ Call करते समय हमने call() Method में First Argument के रूप में एक Object obj को Pass किया है। इसलिए इस बार call() Method Global Context को नहीं बल्कि Object के Local Context को Represent करता है।

चूंकि Pass किए गए Object में भी हमने color नाम की एक Property को Specify किया है, जिसमें Value के रूप में “blue” मान Specified है, इसलिए जब call() Method के First Argument के रूप में Object obj को Pass किया जाता है, तो getColor() Method का this.color Statement Current Object की color Property को Access करता है, जिसमें Value के रूप में “blue” है, न कि Global Context यानी window Object की color Property को।

call() व apply()Method को Call Use करने का मुख्‍य Advantage ये है कि Object को किसी Method के बारे में कुछ भी जानने की जरूरत नहीं होती है और बिना किसी Object को जाने हुए उसके नाम या Reference से उसके Context को Identify कर लेता है और उसी Object की Properties को Access करता है, जिसे इन Methods में First Argument के रूप में Specify किया गया है न कि Global Context की Properties को।

उपरोक्त प्रकार का ही Result प्राप्त करने के लिए हमने इसी Section में निम्नानुसार Code Segment Specify किया था, जिसमें Object के Local Context को Specify करने के लिए हमने Object obj की getColor Property में getColor Function Object का Reference Assign किया था, ताकि getColor() Method का this Object, obj Object की color Property को Access कर सके।

[code]
window.color = “red”;
var obj = { color: “blue”};

function getColor() {
      alert(this.color);
}

getColor();                 // Output: “red”
obj.getColor = getColor;
obj.getColor();             // Output: “blue”
[/code]

जब हम Function Object के toLocaleString() व toString() Methods के बारे में बात करते हैं, तो ये Inherited Methods Function Object के लिए हमेंशा Function का Code Return करते हैं। Return होने वाले Codes अलग-अलग Web Browsers में अलग-अलग तरीके से दिखाई दे सकते हैं।

यानी कुछ Web Browsers Function के Codes को Comments समेत Exactly उसी प्रकार से Return कर देते हैं, जिस प्रकार से उन्हें Script में लिखा गया होता है जबकि कुछ Web Browsers Function के Codes के Internal Representation को Return करते हैं, जिसमें Comments Remove हो चुके होते हैं और Codes भी कुछ हद तक Interpreter के अनुसार Change हो चुके होते हैं।

इसलिए Function के Codes को प्राप्त करने के लिए हम इन Functions पर निर्भर नहीं रह सकते। Function का valueOf() Inherited Method हमेंशा स्वयं Function को Return करता है।

ज्यादातर Modern Web Browsers में caller नाम की एक और Property होती है, जो उस Function को Specify करती है, जिसने किसी दूसरे Function को Call किया है। इस Property को सामान्‍यत: Call किए गए Function के अन्दर arguments.callee.caller Statement द्वारा Access कर सकते हैं।

हालांकि ये Property Internet Explorer, Firefox, Safari व Chrome में Available है, फिर भी इस Property को केवल Debugging Purpose के लिए ही Use करना चाहिए, Professional Development के लिए नहीं।