توابع و روش های فراخوانی آن ها در جاوااسکریپت

توابع و روش های فراخوانی آن ها در جاوااسکریپت
یکی از لذت بخش ترین بخش های مورد استفاده در زبان برنامه نویسی جاوااسکریپت، استفاده از توابع در بخش های مختلف برنامه هست به طوریکه میشه تمام بخش های مورد نیاز رو سازماندهی کرد.
خرید شارژ ایرانسل
خرید شارژ ایرانسل، همراه اول، رایتل | خرید بسته های اینترنت ایرانسل | etore.ir
ردیاب
ردیاب آهنربایی پیام بهترین وسیله برای ردیابی وسیله نقلیه 09121394944
ردیاب
ردیاب آهنربایی پیام بهترین وسیله برای ردیابی وسیله نقلیه 09121394944
خودتان را اینجا معرفی کنید

اگر بخواهیم تابع در جاوااسکریپت رو تعریف کنیم به این صورته که : تابع یک بلاک کد هست که وظیفه ی انجام دادن دستورات خاصی رو داره و تابع زمانی اجرا میشه که در بخشی از برنامه، تابع رو فراخوانی کنیم. حالا این فراخوانی میتونه با مقدار باشه ( یعنی مقداری رو بفرستیم به تابع و محاسباتی انجام بشه و نتیجه نهایی برگشت داده بشه ) و یا اینکه فقط تابع رو فراخوانی کنیم و خود تابع وظیفه ی مشخصی رو انجام بده.

تعریف تابع در جاوااسکریپت :
function name(parameter1, parameter2, parameter3,…) {
    code to be executed
}
نام تابع بعد از کلمه ی کلیدی function قرار می گیره و میتونیم آرگومان هایی رو به صورت آرایه به اون ارسال می کنیم. برای مثال در تابع زیر ما حاصل ضرب دو مقدار رو محاسبه می کنیم و حاصل نهایی برگشت داده میشه به مکانی از برنامه که فراخوانی انجام شده :
function myFunction(p1, p2) {
    return p1 * p2;   // The function returns the product of p1 and p2
}
myFunction(4, 3);     // 4 * 3 = 12
( همیشه سعی کنیم وقتی نامی رو برای تابع انتخاب می کنیم از روش CamelNotation استفاده کنیم یعنی حرف اول از کلمات دوم و سوم رو با حرف بزرگ بنویسیم مثلا به جای اینکه بنویسیم myfunction  مینویسیم myFunction  ، البته این موضوع فقط یک پیشنهاده برای اینکه بتونید برنامه تون رو خواناتر بنویسید. )

 enlightenedوقتی در تابع به دستور return  می رسیم و مقداری رو برگشت میده ، هر دستوری بعد از اون قرار بگیره اجرا نخواهد شد و به نوعی میشه گفت برنامه خاتمه پیدا می کنه.
enlightened وقتی که تابع رو به روش فوق ( Function declaration ) تعریف کردیم در هر جایی از برنامه جاوااسکریپت می تونیم اون تابع رو فراخوانی کنیم حتی قبل از تعریف تابع. برای مثال :
myFunction(5,3);       // 5 * 3 = 15      
function myFunction(p1,p2){
    return p1 * p2;
}
راه دیگری که برای تعریف تابع وجود داره اینه که ما به سبک یک متغیر تابع رو تعریف کنیم و مقدار برگشتی رو توی همون متغیر ذخیره کنیم که در این حالت برای فراخوانی تابع از اسم متغیر استفاده میکنیم :
// function expression
var function_name = function(){};
برای مثال :
var x = function (a, b) { return a * b};
var z = x(6, 3);
در تعریف تابع به صورت فوق ( expression ) ما هیچ نامی رو برای تابع تعریف نمی کنیم و یک تابع بدون نام داریم ولی تابع رو درون متغیر ذخیره کردیم و با استفاده از متغیر تابع رو فراخوانی می کنیم. همچنین در انتهای تعریف تابع ما سمی کالن( ; ) قرار دادیم به این دلیل که جزئی از یک دستوره و فرقی با سایر دستورات و تعریف متغیرها نداره.
اما نکته ای که در اینجا خیلی مهمه مکان فراخوانی این نوع تعریف توابعه، اگر ما فراخوانی تابع رو قبل از تعریف تابع انجام دهیم تابع فراخوانی نمیشه و کار نمیکنه. برای مثال :

myFunction(5,3);       // WON'T WORK      
 var myFunction = function (p1,p2){
    return p1 * p2;
}
myFunction(5,3);       // 15      
 
دلیل این موضوع مبحثی به نام  Hoisting در جاوااسکریپت هست که اگر اشاره ای مختصر بهش داشته باشیم به این صورته که :
" Hoisting  در جاوااسکریپت یک رفتار پیشفرض برای انتقال اعلان ها به بالاترین سطح تابع می باشد یعنی  وقتی متغیری و یا اینکه تابعی رو اعلان می کنیم به بالاترین سطح تابع منتقل میشن و به همین خاطر میتونیم قبل از تعریف تابع اون رو فراخوانی کنیم ولی نکته ای که وجود داره این موضوع هست که در متغیرها فقط اعلانشون رو به بالاترین سطح میبره یعنی وقتی var x = 5 ;  داریم فقط  var x;  رو اعلان میکنه و اگر قبل از مقدار دهی، اون متغیر رو فراخوانی کنیم undefined خواهد بود. "
 
استفاده از توابع یکی از بخش هایی هست که من خیلی ازش لذت می برم چونکه به راحتی می تونیم تمام بخش های برنامه رو ماژولار درست کنیم و در هر برنامه ای که لازم داشتیم می تونیم همون تابع رو بارها و بارها استفاده و فراخوانی کنیم.
 
زمان فراخوانی تابع در جاوااسکریپت :
کدها و دستورالعمل های داخل یک تابع در حالت های زیر اجرا میشن :
  1. زمانی که یک event  روی بده مثلا کاربر عملی رو انجام بده مثل کلیک کردن و...
  2. زمانی که تابع رو در داخل کدهای جاوااسکریپت فراخوانی کنیم.
  3. تابع به صورت اتوماتیک اجرا بشه (self invoked  )

تابع خودفراخوان و یا self-invoking function  
 

توابع IIFE به صورت اتوماتیک فراخوانی میشن ، در این نوع تعریف ما باید تابع را داخل پرانتز بنویسیم و اینکه این توابع بدون نام ( anonymous self-invoking function ) هستند.
رایج ترین تعریف این نوع توابع به 2 صورت زیر می باشد :
(function () {
    var x = "salam!";     
})();
و یا

(function () {
    var x = "salam!";     
}());
توابع IIFE ایده آل ترین راه نوشتن کدهایی هستند که بخواهیم یکبار اجرا شوند و یا اینکه بخواهیم یک Closures ایجاد کنیم و یا یک متغیر خصوصی (private) ایجاد کنیم و ...
به مثال زیر توجه کنید :

var page_language = (function(){
var lang;
// Code to get the language of the page
Return lang;
})();
در مثال بالا زبان صفحه رو بدست میاریم و تابع فقط یکبار اجرا خواهد شد.(ترجیحا بعد از لود کامل صفحه ) و در داخل متغیر Page_language ذخیره میکنیم و در دفعات بعدی از متغیر استفاده میکنیم.
متدها :
زمانی که تابعی رو به عنوان یک ویژگی) object ( تعریف کنیم اون رو به عنوان یک متد می شناسیم. چونکه یک تابع یک Object هست، یک تابع درون یک تابع دیگه هم یک متد هست. ( توابع تو در تو)
به مثال زیر در رابطه با متد در شی توجه کنید :

var calc = {
  add : function(a,b){return a+b},
  sub : function(a,b){return a-b} 
}
console.log(calc.add(1,2)); //3
console.log(calc.sub(80,2)); //78
 
توابعی که درadd  و sub  تعریف شدن متدهایی در آبجکت calc هستند.
حالا به مثال تابعی که درون تابع دیگه ( تو در تو ) تعریف شده دقت کنید :

function add(a){
  return function(b){return a+b;}
}
console.log(add(1)(2)); // Output is
تابعی که به صورت anonymous function برگشت شده ( return ) یک متد برای تابع add می باشد. 

توابع سازنده ( Constructors ) :

زمانی که شما کلمه ی new رو قبل از نام تابع استفاده کنید و فراخوانی کنید در واقع یک نمونه از اون تابع رو می سازید، مثال زیر نمونه ای از سازنده هاست که برای ایجاد نمونه ای از تابع Fruit و اختصاص دادن مقدار به اون ذکر شده است :

function Fruit(){  
  var name, family; // Scientific name & family
  this.getName = function(){return name;};
  this.setName = function(value){name=value};  
  this.getFamily = function(){return family;};
  this.setFamily = function(value){family=value};
}
 
var apple = new Fruit();
apple.setName("Malus domestica");
apple.setFamily("Rosaceae");
 
var orange = new Fruit();
orange.setName ("Citrus × sinensis");
orange.setFamily ("Rutaceae");
 
console.log(orange.getName()); // "Citrus × sinensis"
console.log(apple.getName()); // "Malus domestica"
console.log(orange.getFamily()); // "Rutaceae"
 
امیدوارم مفید بوده باشه wink
 

میکائیل اندیشه هستم، چند سالی میشه در حوزه Front-End کار میکنم و بیشتر علاقه ی من در زمینه برنامه نویسی JavaScript , jQuery و تکنولوژی های مرتبط هست و فعلا نیز در این حوزه مطالعه میکنم ... :)

نظرات و سوالات کاربران

ارسال پاسخ میکائیل
میکائیل
یکشنبه ۰۴ بهمن ۱۳۹۴ ۱۳:۲۹
در پاسخ به دیدگاه مهران ارسال شده در چهارشنبه ۳۰ دی ۱۳۹۴ ۱۳:۴۱
سلام،
مرسی، مطلب خوبی بود
اما بهتره مباحث رو پیشرفته تر بکنین
ممنون مهران عزیز، حتما همین کار رو انجام میدیم ;)
ارسال پاسخ مهران
مهران
چهارشنبه ۳۰ دی ۱۳۹۴ ۱۳:۴۱
سلام،
مرسی، مطلب خوبی بود
اما بهتره مباحث رو پیشرفته تر بکنین