تقدم هذه المقالة طرق ومبادئ مكالمات الوظائف المختلفة في JavaScript بالتفصيل ، والتي هي ذات مساعدة كبيرة لفهم وظائف JavaScript!
JavaScript ، 5 طرق للاتصال بالوظائف
مرارًا وتكرارًا ، وجدت أن رمز JavaScript الخالي من الأخطاء ناتج عن عدم فهم كيفية عمل وظائف JavaScript (بالمناسبة ، يتم كتابة الكثير من هذا الرمز من قبلي). لدى JavaScript طبيعة البرمجة الوظيفية ، والتي ستصبح عائقًا أمام تقدمنا عندما نختار مواجهته.
كمبتدئين ، دعنا نختبر خمس مكالمات وظائف. من السطح ، سوف نعتقد أن هذه الوظائف تشبه إلى حد كبير تلك الموجودة في C#، ولكن يمكننا أن نرى أنه لا تزال هناك اختلافات مهمة للغاية في المستقبل. إن تجاهل هذه الاختلافات سيؤدي بلا شك إلى حشرات يصعب تتبعها. أولاً ، دعنا ننشئ وظيفة بسيطة ، والتي سيتم استخدامها أدناه ، وهذه الوظيفة تُرجع فقط القيمة الحالية لهذا والمعلمات المقدمة.
نسخة الكود كما يلي:
<script type = "text/javaScript">
وظيفة makearray (arg1 ، arg2) {
العودة [هذا ، Arg1 ، Arg2] ؛
}
</script>
الطريقة الأكثر استخدامًا ، ولكن للأسف ، تستدعي الوظائف العالمية
عندما نتعلم JavaScript ، نتعلم كيفية تحديد الوظائف باستخدام بناء الجملة في المثال أعلاه.
، نعلم أيضًا أن استدعاء هذه الوظيفة بسيطة للغاية ، وكل ما نحتاج إلى فعله هو:
نسخة الكود كما يلي:
MakeArray ('One' ، 'اثنين') ؛
// => [نافذة ، "واحد" ، اثنان "]
انتظر دقيقة. ما هي تلك النافذة
تنبيه (typeof window.methodthatdoesntexist) ؛
// => غير محدد
تنبيه (typeof window.makearray) ؛
// =>
Window.MakeArray ('One' ، 'اثنين') ؛
// => [نافذة ، "واحد" ، اثنان "]
أقول إن الطريقة الأكثر شيوعًا للاتصال أمر مؤسف لأنها تسبب الوظيفة التي نعلن أنها عالمية بشكل افتراضي. نعلم جميعًا أن الأعضاء العالميين ليسوا أفضل ممارسة للبرمجة. هذا صحيح بشكل خاص في جافا سكريبت. لن تندم على تجنب الأعضاء العالميين في JavaScript.
استدعاء وظيفة JavaScript القاعدة 1
في الوظائف التي لا تسمى مباشرة بواسطة كائنات مالك صريحة ، مثل myFunction () ، سوف تتسبب في أن تصبح هذه القيمة الكائن الافتراضي (نافذة في المتصفح).
مكالمات الوظائف
دعنا ننشئ كائنًا بسيطًا الآن ، استخدم وظيفة MakeArray كطريقة لها. سنستخدم طريقة JSON لإعلان كائن ، وسنطلق أيضًا على هذه الطريقة
نسخة الكود كما يلي:
// إنشاء الكائن
var arraymaker = {
بعض الشيء: "بعض القيمة هنا" ،
جعل: makearray
} ؛
// استدعاء طريقة Make ()
arraymaker.make ('One' ، 'اثنين') ؛
// => [Arraymaker ، 'One' ، اثنين ']
// بناء جملة بديل ، باستخدام أقواس مربعة
Arraymaker ['make'] ('One' ، 'اثنين') ؛
// => [Arraymaker ، 'One' ، اثنين ']
انظر الفرق هنا ، تصبح هذه القيمة الكائن نفسه. قد تتساءل لماذا لم يتغير تعريف الوظيفة الأصلية ، فلماذا لا يكون نافذة. حسنًا ، هذه هي الطريقة التي يتم بها تمرير الوظائف في JSavar. الوظائف هي نوع بيانات قياسي في JavaScript ، أو أن تكون دقيقة ، كائن. يمكنك تمريرها أو نسخها. يبدو الأمر كما لو أن الوظيفة بأكملها وقائمة المعلمات وجسم الوظيفة يتم نسخها وتعيينها إلى العقار في صانع ArrayMaker ، لذلك فهي مثل تعريف صانع الجمعية مثل هذا:
نسخة الكود كما يلي:
var arraymaker = {
بعض الشيء: "بعض القيمة هنا" ،
جعل: وظيفة (arg1 ، arg2) {
العودة [هذا ، Arg1 ، Arg2] ؛
}
} ؛
استدعاء وظيفة JavaScript القاعدة 2
في بناء جملة استدعاء الطريقة ، مثل obj.myfunction () أو obj ['myfunction'] () ، فإن قيمة هذا هي OBJ
هذا هو المصدر الرئيسي للبق في رمز معالجة الأحداث. ألق نظرة على هذه الأمثلة
نسخة الكود كما يلي:
<type type = "button" value = "button 1" id = "btn1" />
<type type = "button" value = "button 2" id = "btn2" />
<type type = "button" value = "button 3" id = "btn3" onClick = "ButtonClicked () ؛"/>
<script type = "text/javaScript">
وظيفة buttonclicked () {
var text = (this === window)؟ "نافذة": هذا.
تنبيه (نص) ؛
}
var button1 = document.getElementById ('btn1') ؛
var button2 = document.getElementById ('btn2') ؛
button1.onclick = buttoncked ؛
button2.onclick = function () {buttonclicked () ؛ } ؛
</script>
سيعرض النقر فوق الزر الأول "BTN" لأنه استدعاء طريقة ، وهذا هو الكائن الذي ينتمي إليه (عنصر الزر). سيتم عرض النقر فوق الزر الثاني على عرض "نافذة" لأن Buttoncked يتم استدعاؤه مباشرة (على عكس OBJ.buttonclicked ().) هذا هو نفس الزر الثالث لدينا ، مما يضع وظيفة معالجة الأحداث مباشرة في الملصق. وبالتالي فإن نتيجة النقر على الزر الثالث هي نفس الزر الثاني.
باستخدام مكتبة JS مثل jQuery لديه ميزة. عندما يتم تعريف معالج الأحداث في jQuery ، ستساعد مكتبة JS في تجاوز هذه القيمة لضمان أن تحتوي على إشارات إلى عنصر مصدر الحدث الحالي.
نسخة الكود كما يلي:
// استخدام jQuery
$ ('#btn1'). انقر فوق (function () {
تنبيه (this.id) ؛ // يضمن jQuery "هذا" سيكون الزر
}) ؛
كيف يفرط jQuery قيمة هذا؟ مواصلة القراءة
الاثنان الآخران: تطبيق () و Call ()
كلما استخدمت وظائف JavaScript ، كلما وجدت أنك بحاجة إلى تمرير الوظائف والاتصال بها في سياقات مختلفة. تمامًا مثل QJuery في وظائف التعامل مع الأحداث ، فغالبًا ما تحتاج إلى إعادة ضبط هذه القيمة. تذكر ما قلته لك ، في وظائف JavaScript هي أيضًا كائنات. تحتوي كائنات الوظيفة على بعض الطرق المحددة مسبقًا ، يتم تطبيق اثنين منها () و Call () ، والتي يمكننا استخدامها لإعادة ضبط هذا.
نسخة الكود كما يلي:
var gasguzzler = {year: 2008 ، model: 'Dodge Bailout'} ؛
makearray.apply (gasguzzler ، ['One' ، 'اثنين']) ؛
// => [Gasguzzler ، 'One' ، 'اثنين']
makearray.call (gasguzzler ، 'One' ، 'اثنين') ؛
// => [Gasguzzler ، 'One' ، 'اثنين']
هاتان الطريقتان متشابهتان ، والفرق هو الفرق في المعلمات التالية. يستخدم function.apply () صفيفًا لتمريره إلى الوظيفة ، في حين أن الدالة. call () يمرر هذه المعلمات بشكل مستقل. في الممارسة العملية ، ستجد أن تطبيق () أكثر ملاءمة في معظم الحالات.
JSavarscript وظيفة استدعاء القاعدة 3
إذا كنا نريد تحميل قيمة هذا دون نسخ الوظيفة إلى طريقة ما ، فيمكننا استخدام myfunction.apply (obj) أو myfunction.call (OBJ).
مُنشئ
لا أرغب في البحث في تعريف الأنواع في JavaScript ، ولكن في هذه اللحظة ، نحتاج إلى معرفة أنه لا يوجد فئة في JavaScript ، وأي نوع مخصص يتطلب وظيفة تهيئة. من الجيد أيضًا تحديد نوعك باستخدام كائن النموذج الأولي (كخاصية لوظيفة التهيئة). دعنا ننشئ نوعًا بسيطًا
نسخة الكود كما يلي:
// إعلان مُنشئ
وظيفة ArrayMaker (Arg1 ، Arg2) {
this.someProperty = "أيا كان" ؛
this.tearray = [this ، arg1 ، arg2] ؛
}
// إعلان طريقة التأسيس
arraymaker.prototype = {
somemethod: function () {
في حالة تأهب ('somemethod يسمى') ؛
} ،
getarray: function () {
إرجاع هذا.
}
} ؛
var am = new Arraymaker ('One' ، 'اثنين') ؛
var other = new Arraymaker ('First' ، 'Second') ؛
Am.GetArray () ؛
// => [AM ، 'One' ، 'اثنين']
واحد مهم للغاية وجدير بالملاحظة هو المشغل الجديد الذي يظهر أمام مكالمة الوظيفة. بدون ذلك ، تشبه وظيفتك وظيفة عالمية ، وسيتم إنشاء الخصائص التي ننشئها على كائن عالمي (نافذة) ، ولا تريد القيام بذلك. موضوع آخر هو أنه نظرًا لعدم وجود قيمة إرجاع في مُنشرك ، إذا نسيت استخدام المشغل الجديد ، فسيتم تعيين بعض متغيراتك غير محددة. لهذا السبب ، من الجيد أن تبدأ بحرف رأس المال. يمكن استخدام ذلك كتذكير لعدم نسيان المشغل الجديد السابق عند الاتصال.
مع هذا الحذر ، يشبه الكود في وظيفة التهيئة وظيفة التهيئة التي كتبتها بلغات أخرى. ستكون قيمة هذا هو الكائن الذي ستنشئه.
استدعاء وظيفة JavaScript القاعدة 4
عند استخدام وظيفة كدالة تهيئة ، مثل MyFunction () ، سيحدد وقت تشغيل JavaScript قيمة هذا ككائن تم إنشاؤه حديثًا.
آمل أن يكون فهم الاختلافات في طرق الاتصال المختلفة سيبقي رمز SjavaScript الخاص بك بعيدًا عن الأخطاء ، وأن بعض هذه الأخطاء ستتأكد من أنك تعرف دائمًا أن قيمة هذه هي الخطوة الأولى لتجنبها.