[JavaScript] : آموزش مباحث پیشرفته و شی گرایی در جاوااسکریپت

سلام.

با توجه به کمبود مطالب فارسی در این زمینه تصمیم گرفتم، یک آموزش خیلی کوچیک در این رابطه بنویسم، تا یک مرجع کوچیک در این زمینه باشه. لازم به ذکر هست که این مطالب از هیچ جایی کپی برداری نشده، و تمامی مطالب برگرفته از خود نویسنده این مطالب هست. چنانچه مطالبی از سایتها و منابع معتبر دیگه در اینجا قرار بگیره با ذکر کامل منبع خواهد بود. همچنین قرار دادن این مطالب در وبلاگها و سایتها فقط با ذکر کامل منبع و نام نویسنده مجاز هست.

هر چند با یک وقفه ی طولانی بالاخره این امر داره امکان پذیر می شه ولی خب خیلی دیره، قرار بود من این مطالب رو 6 الی 7 ماه پیش بزارم که از تنبلی من نتونستم زودتر از این آماده کنم. شدیدا از تمامی دوستان و همکاران عزیز عذر خواهی می کنم. همونطور که از اسم تاپیک پیداست در این تاپیک درباره مباحث پیشرفته و ... در رابطه با جاوااسکریپت بحث می شه، لذا دوستانی که آشنایی مقدماتی با جاوااسکریپت رو ندارن و یا خیلی کم در مورد این زبان اسکریپت نویسی می دونن توصیه می کنم برای یادگیری بهتر و سریع تر به این دو سایت زیر مراجعه کنند.

کد:

---

http://www.neopersia.org/

---

کد:

---

http://www.w3schools.com/

---

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

کد:

---

http://forum.p30world.com/showthread.php?p=3509450

---

بسیار ممنون.

جاوااسکریپت هم مثل اکثر زبانهای برنامه نویسی، از برنامه نویسی شی گراء ( Object Oriented Programing ) پشتیبانی می کنه، یعنی در اصل و ذاتا شی گراء نیست، ولی از شی گرائی پشتیبانی می کنه. ( زبانهایی که ذاتا از شی گرایی پشتیبانی می کنن، زبانهایی مثل C# و Java هستند. ). در جاوااسکریپت شی گرایی به صورت کامل و در حد قابل قبول پشتیبانی نمی شه، البته تا قبل از ورژن 2. ناگفته نمونه که ورژن 2 هنوز کامل نشده و هنوز خیلی کار داره. کمتر مرورگری از قابلیتهای ورژن 2 در جاوااسکریپت پشتیبانی می کنن. مثلا فایر فاکس تعداد کمی از دستورات جاوااسکریپت ورژن 2 رو پشتیبانی می کنه.

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

کد:

---


function obj() {};

---

در روش بالا ما به صورت معمول عمل کردیم و مانند یک تابع شی مورد نظرمون رو ساختیم، ما می تونیم بعدا هر چه قدر که نیاز داشتیم، متدهای دلخواه خودمون رو بهش اضافه کنیم. متد های ما می تونن هر نوع داده ای ( type ) رو قبول کنن، و از این لحاظ هیچ محدودیتی وجود نداره. و ما می تونیم از هر نوعی که نیاز داشتیم استفاده کنیم. مثل: string, array, boolean و ...
مثال:

کد:

---

// this is an array
obj.arr = new Array(1,2,3,4,5);

// this is an string
obj.str = new String("my string");

// this is an boolean
obj.bool = new Boolean(true);

// this is an function
obj.func = function() { /*do somethings…*/ };

---

در مثالهای بالا فکر می کنم متوجه همه چیز شده باشید. دیدید که ما می تونیم هر نوع داده ای رو تعریف کنیم.
خیلی بهتر می شه یه مثال کوچیک بزنیم، تا یکم بهتر متوجه بشید. توی این مثال ما متدهایی رو که معرفی کردیم، طریقه به کارگیری متدها و نحوه ی اجرا کردنشون رو یاد می گیریم.

کد:

---

// create the base class
function obj() {};

obj.arr = new Array(1,2,3,4,5);
obj.str = new String("My String");
obj.bool = new Boolean(true);
obj.func = function() {
      for (var i = 0; i <  obj.arr.length; i++) {
            document.write("<br />Array : " + obj.arr[i]);
      };
      document.write("<br />String : " + obj.str);
      document.write("<br />Boolean : " + obj.bool);
};

window.onload = new Function(obj.func());

---

در مثال بالا هیچ ابهامی فکر نمی کنم وجود داشته باشه، ولی در هر حال یه توضیح مختصر در رابطه با متد func می دم. در این متد ما از یک حلقه استفاده کردیم تا تمامی محتوای آرایه مون رو به نمایش بزاره، بعد از اون هم دو متد دیگه رو به نامهای bool و str چاپ کردیم. که خودش نشون دهنده نحوه صدا زدن متدها هست.
همونطور که می دونید، Javascript نیاز به تعریف نوع متغیر ها نداره و خودش نوع متغیر رو تشخیص می ده، در مثالهای بالا دیدید که ما نوع متغیر رو هم تعریف کردیم. و دلیلش هم اینه که گیرایی مطلب واضحتر می شه.

تا حالا زیاد به شی گرایی نپرداختیم، پس بهتره ادامه رو خوب بخونید.
شی گرایی خیلی به ما کمک می کنه، از اونجایی که هر کلاس مفهوم خاصی رو داره، و برای کارهایی خاصی نوشته شده و به کار می ره، ما هر وقت به کلاسی که نوشتیم احتیاج پیدا کردیم می تونیم خیلی راحت ازش استفاده کنیم، بدون اینکه سردر گم بشیم!
یه مثال می زنم:

کد:

---

var student = new Object();
student.name = "Amin";
student.family = "Akbari";

alert("your name is: " + student.name + " and lastname is: " + student.family);

---

در مثال بالا ما یک شی تعریف کردیم با نام student و دارای دو پراپرتی name و family هست. از این به بعد هر وقت نیاز به مشخصات این دانش آموز بود می تونیم از همین شی استفاده کنیم. یه نکته توی مثال بالا هست و اونم اینه که چرا ما مثل دفعات قبل عمل نکردیم و بجای function student(){} از var student = new Object(); استفاده کردیم؟ خب فعلا زیاد خودتون رو درگیر اینجور مسائل نکنید، بعدا قدم به قدم این روشها رو توضیح می دم.

فکر می کنم، شما متوجه یک محدودیت در این روشهایی که تا حالا توضیح دادم شده باشید! بله، در این روش نمی شه داده ها رو به صورت پویا ایجاد کرد. البته نگران نباشید، برای اینکار راه و روشی اندیشیده شده فقط باید صبر کنید. تا به آموزشهای بعدی برسیم. مبحث شی گرایی هنوز تموم نشده و هنوز باهاش کار داریم. بهتره قبل از ادامه دادن مبحث شی گرایی با مباحث دیگه که پیش نیاز هست آشنا بشید بعدا همه با هم می ریم سراغ شی گرایی!

ادامه دارد...

سلام.

امیدوارم آخرین پنجشنبه ی سال بهتون خوش بگذره:10:
یه چیز! شاید بعدا بفهمید، چرا لفظ قلم صحبت می کنم:31:
------------------------

درآموزش قبلی شما تا حدودی با بعضی از روشهای تعریف توابع آشنا شدید، ما قصد داریم تا در این قسمت از آموزشها شما را با این موارد آشنا کنیم، یادتان باشد از نظر بنده این موارد بسیار مهم می باشد و یاد گرفتن آن برای هر فردی که در جاوااسکریپت برنامه نویسی می کند مهم است. نگران هم نباشید، چون فکر می کنم هیچ زبانی به اندازه ی جاوااسکریپت ساده نیست!

در JavaScript روشهای مختلفی برای تعریف کردن توابع و از جمله اشیاع وجود دارد که هرکدام هم برای کارهای خاصی به کار برده می شوند. ما در این آموزش به موارد اولیه نمی پردازیم، سعی می کنیم بیشتر به مواردی که کمتر با آنها آشنایی دارید بپردازیم. یکی از روشهایی که می تواینم در JavaScript از آن استفاده کنیم این است که می شود از متغیرها هم برای اینکار استفاده نمود، که در آموزش قبل با آن آشنا شدید:

کد:

---

var func = function() {
    return alert("everything");
};

func();

---

در این روش هم ما می توانیم، انواع متدها را به آن اضافه کنیم. هیچ محدودیتی وجود ندارد ( در تمامی روشها ). روش دیگر که با آن روبه رو شدید این بود که یک شی جدید ایجاد می کردیم، مانند زیر:

کد:

---

var obj = new Object();
obj.mymethod = function() {
    return alert("everything");
};

obj.mymethod();

---

لازم به ذکر است که روش بالا اکثرا برای شی گرایی استفاده می شود، و عمده کاربردهای آن برای این موضوع خواهد بود. البته این به این معنا نیست که شما مجبورید فقط از این روش برای شی گرایی استفاده کنید، خیر شما می توانید از هر روشی که مورد نظرتان بود استفاده کنید. بستگی به خودتان دارد و شما مختارید هر کدام از روشهای موجود را بکار برید. گمان می کنم به تفاوت این روش با روشهای قبل پی برده اید!
همانطور که قبلا هم گفته ام روشهای فوق پیچیدگی خاصی ندارند و از این رو هیچ ابهامی بوجود نمی آید. اما در این روش که اکنون قصد توضیح آن را دارم، کمی دشوار است، البته نه به معنای واقعی کلمه! دلیل این که کلمه دشوار را بکار بردم نیست که، این روش واقعا سخت است و نیاز به تمرین زیاد دارد، بلکه منظور من از این کلمه این است باید در این روش نهایت دقت را بکار برد. چون تنها یک ویرگول ( , ) کمتر یا بیشتر ممکن است مشکل ساز شود! ( این موارد در پروژه های بزرگ بسیار دیده می شود. )، البته با ابزارهایی که اکنون وجود دارد مانند Firebug شما می توانید به سریع ترین شکل ممکن این مشکل را برطرف کنید. همچنین Error Console قدرتمندی که در سه مرورگر سافاری، فایرفاکس و اپرا ( که متاسفانه اینترنت اکسپلورر از این امکان بی بهره است. ) قرار دارد شما می توانید عملیات اشکال زدایی را انجام دهید.
در این روش تمامی متدها درون یک بلوک قرار می گیرند، و با علامت ویرگول از همدیگر متمایز می شوند. شما درون بلوک مربوطه می توانید n تا متد اضافه کنید. البته در این روش هم ما می توانیم از هر نوع داده ای که نیاز داشتیم استفاده کنیم مانند: string, boolean و ... این روش یکی از روشهای محبوب من است، بنده برای کارهای بزرگ این روش را به همگی توصیه می کنم. از بسیاری از جهات هم کد بصرفه تری تولید خواهد شد.
نحوه ی تعریف هم به این صورت است که اول باید نام متد را نوشته سپس با علامت دو نقطه ( : ) باید نام متد/پراپرتی از مقدار آن جدا شود و بعد مقدار آن را نوشت به این صورت:

کد:

---

var obj = {
      name : value
};

---

تکه کد زیر را در نظر بگیرید:

کد:

---

var obj = {
    string: "my string",
    array: ["1","2","3"],
    boolean: true,
    number: 325,
    func: function() { return alert("test"); }
};

// for use
obj.string;
obj.array[1];
obj.boolean;
obj.number;
obj.func();

---

مثال بالا کاملا واضح بوده و نیازی به توضیح نخواهد داشت، ولی اگر سوالی داشتید می توانید در تاپیک مربوطه بپرسید.
فقط به یک نکته ی مهم باید توجه شود. در مرورگر اینترنت اکسپلورر در این روش مانند آرایه ها برخورد می شود، لذا هرگز نباید برای آخرین متد علامت ویرگول در نظر گرفته شود. اگر این علامت در آنجایی که گفته شد قرار گیرد، در مرورگر IE به مشکل بر می خورید و کد مربوطه هرگز اجرا نخواهد شد، اروری رخ می دهد که پیدا کردن آن کمی دشوار است بخاطر Error console ضعیف IE . ولی اگر همان کد را در مرورگرهای دیگر اجرا کنید، به مشکل خاصی برنخواهید خورد.

برویم سراغ یک موضوع دیگر، شاید شما بعضی از مواقع نیاز داشته باشید که از یک کلمه ی کلیدی برای متدهای خود استفاده کنید! مانند if, for, float, class, function و ... حالا یک سوال پیش می آید. چطور می توان در جاوااسکریپت چنین عملی را انجام داد؟ جواب این سوال ساده است! در جاوااسکریپت می شود مانند آرایه ها متدها را ایجاد و یا به آن دسترسی یافت. مثال زیر را در نظر بگیرید:

کد:

---

var obj = new Object();
obj["function"] = function() {
      return alert("use Keyword & Reserved words, in JavaScrip!");
};

obj["function"]();

---

و همینطور بقیه کلمات را هم می شود به همین طریق بکار برد. توجه کنید حتما باید بصورت بالا متدها را اضافه کنید تا در تمامی مرورگرها بدرستی اجرا شود. در روش دیگر که کدها درون یک بلوک قرار دارند، هم می شود اینکار را انجام داد و روش کار آن هم تقریبا به همان صورت است، با این تفاوت که مانند یک استرینگ باید اضافه شود. مثال:

کد:

---

var obj = {
    "for" : function(){/* do somethings */}
};
obj["for"]();

---

همانطور که مشاهده می کنید، کلمه کلیدی for درون یک استرینگ قرار داده شده است. اینکار باعث می شود تا با کلمه کلیدی for مانند یک رشته رفتار شود.

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

کد:

---

var obj = (function(arg) {
      return alert(arg);
})("my Arguments");

obj;

---

همانطور که مشاهده می شود ما تابع خود را در درون یک پرانتز قرار می دهیم مانند:

کد:

---

(function(){})

---

و بعد از آن هم یک پرانتز دیگر مقابل آن قرار می دهیم برای اینکه آرگومانهایی را که ایجاد کردیم، مقدار دهی کنیم. مثال:

کد:

---

(function(arg1, arg2){})("Arguments 1", "Arguments 2");

---

به همین روش شما می توانید آرگومانهای تابع مورد نظر را از قبل مقدار دهی کنید. در ضمن این را هم توجه داشته باشید که اگر از این روش استفاده شود دیگر نیازی نیست مانند دیگر تابع ها صدا زده شود. یعنی نباید در جلوی آن علامت پرانتز قرار گیرد، چون دیگر با آن مانند یک تابع رفتار نمی شود!
کمی صبر کنید، این تنها روش برای اینکار نیست! ما می توانیم از روشهای دیگر هم به همین صورت استفاده کنیم به اینصورت که مانند قبل بعد از تابع یک پرانتز باز کرده و آرگومانهای موجود را مقدار دهی می کنیم. مثال:

کد:

---

obj = function(args) {}("Arguments");

---

توجه کنید که فقط می توانید از همین دو روش استفاده کنید، و در روشهای دیگر مانندfunction obj(){}() نمی توان از این روش استفاده کرد!

و مطلب آخر این قسمت از آموزش، به توابع بی نام اختصاص دارد. اینکه ما چطور می توانیم از توابع بی نام استفاده کنیم. گاهی اوقات نیاز است تا از توابع بی نام استفاده شود، حال سوال این است که چطور می شود این روش را پیاده سازی کرد؟ اینکار بسیار ساده است، برای اینکار به دوصورت می توان عمل کرد که در این قسمت توضیح خواهم داد.
اولین روش این است که با استفاده از عملگر new یک تابع ایجاد و نام آن را حذف کنیم، مثال:

کد:

---

new function() {
      var str = "anonymous functions creation";
      alert(str);
};

---

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

کد:

---

(function() {
      var str = "anonymous functions creation";
      alert(str);
})();

---

شما می توانید از تمامی امکاناتی که این روش در اختیارتان می گذارد استفاده کنید، که قبلا توضیح داده شده است.

امیدوارم این آموزش هم مورد قبول دوستان واقع شده باشه، در آموزش بعدی به اشاره گر this می پردازیم.
دوباره می گم اگر اشکالی در آموزش بنده می بینید حتما اطلاع بدید، چون هرگز نمی خوام اطلاعات غلط به ملت داده بشه.

موفق باشید و عیدتون هم مبارک.:11: