توابع و روش های فراخوانی آن ها در جاوااسکریپت
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
افزونه فرم ساز آسان
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
خرید ورق گالوانیزه رنگی
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
کارگاه رویه کوبی در تهران
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی
بلیط هواپیما مشهد تهران
خرید بلیط هواپیما مشهد تهران
خرید بلیط هواپیما مشهد تهران
بلیط هواپیما تهران شیراز
خرید بلیط هواپیما تهران شیراز
خودتان را اینجا معرفی کنید
خرید بلیط هواپیما تهران شیراز
اگر بخواهیم تابع در جاوااسکریپت رو تعریف کنیم به این صورته که : تابع یک بلاک کد هست که وظیفه ی انجام دادن دستورات خاصی رو داره و تابع زمانی اجرا میشه که در بخشی از برنامه، تابع رو فراخوانی کنیم. حالا این فراخوانی میتونه با مقدار باشه ( یعنی مقداری رو بفرستیم به تابع و محاسباتی انجام بشه و نتیجه نهایی برگشت داده بشه ) و یا اینکه فقط تابع رو فراخوانی کنیم و خود تابع وظیفه ی مشخصی رو انجام بده.
تعریف تابع در جاوااسکریپت :
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 ، البته این موضوع فقط یک پیشنهاده برای اینکه بتونید برنامه تون رو خواناتر بنویسید. )وقتی در تابع به دستور return می رسیم و مقداری رو برگشت میده ، هر دستوری بعد از اون قرار بگیره اجرا نخواهد شد و به نوعی میشه گفت برنامه خاتمه پیدا می کنه.
وقتی که تابع رو به روش فوق ( 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 خواهد بود. "
استفاده از توابع یکی از بخش هایی هست که من خیلی ازش لذت می برم چونکه به راحتی می تونیم تمام بخش های برنامه رو ماژولار درست کنیم و در هر برنامه ای که لازم داشتیم می تونیم همون تابع رو بارها و بارها استفاده و فراخوانی کنیم.
زمان فراخوانی تابع در جاوااسکریپت :
کدها و دستورالعمل های داخل یک تابع در حالت های زیر اجرا میشن :
- زمانی که یک event روی بده مثلا کاربر عملی رو انجام بده مثل کلیک کردن و...
- زمانی که تابع رو در داخل کدهای جاوااسکریپت فراخوانی کنیم.
- تابع به صورت اتوماتیک اجرا بشه (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"
امیدوارم مفید بوده باشه
نظرات و سوالات کاربران
انقدر لذت بردم که برعکس چندین صفحه قبلی تا آخرش خوندم و ترکش نکردم.
خوشحالم که مقاله براتون جذاب بوده. {گل}
ممنون که مطالب به این مهمی رو ساده بیان کردین
دانش یک فرد به ساده بیان کردن یک مطلبه
مرسی، مطلب خوبی بود
اما بهتره مباحث رو پیشرفته تر بکنین