تعد وظيفة السهم واحدة من أكثر التحديثات شعبية في ECMASCRIPT 6. إنها تقدم بناء جملة جديد لتحديد الوظائف باستخدام "Arrow" (=>) ، إنه ... إنه مخبأ ~. الاختلافات الرئيسية بين وظائف السهم ووظائف JavaScript التقليدية هي كما يلي:
1. صلة بهذا. قيمة هذا مدمجة ، اعتمادًا على مكان تعريف وظيفة السهم ، وليس السياق الذي يتم فيه تنفيذ وظيفة السهم.
2. New غير متوفر. لا يمكن لدالة السهم استخدام الكلمة الرئيسية الجديدة لإنشاء إنشاء كائن ، وإلا سيتم الإبلاغ عن خطأ.
3. هذا غير قابل للتغيير. هذا مدمج للعمل وهو ثابت في بيئة التنفيذ بأكملها داخل هيئة الوظيفة.
4. لا حجج كائن. لا يمكن الوصول إلى المعلمات الواردة من خلال كائن الوسائط. لا يمكن القيام به إلا باستخدام تسمية صريحة أو غيرها من ميزات ES6 الجديدة.
وجود هذه الاختلافات معقولة. أولاً ، يعد الارتباط بهذا أحد المصادر الشائعة لأخطاء JavaScript. من السهل فقدان القيم المدمجة للوظائف أو الحصول على نتائج غير متوقعة. ثانياً ، فإن الحد من وظيفة السهم لاستخدام هذا المرجع ثابت يفضي إلى معالجة تحسين محرك JavaScript.
1. بناء الجملة
بناء الجملة لوظيفة السهم بسيطة ، وتحديد المتغيرات المستقلة ، ثم السهم وجسم الوظيفة. يمكن استخدام المتغيرات والمواضيع المستقلة بتنسيق أكثر إيجازًا بسبب استخدام مختلف. المثال التالي هو وظيفة السهم التي تمرر المعلمة وإرجاع قيمة.
نسخة الكود كما يلي:
var عكس = value => value ؛
// ما يعادل:
var عكس = الدالة (القيمة) {
قيمة الإرجاع
} ؛
يمكن ملاحظة أنه يمكنك فقط كتابة معلمة عن طريق تمريرها ، دون إضافة قوسين. يشير السهم إلى جسم الوظيفة ، لكن جسم الوظيفة هو مجرد بيان إرجاع بسيط ، لذلك ليست هناك حاجة لإضافة أقواس. بعد بناء الوظيفة ، يتم تعيينه للانعكاس والمرجع.
إذا كانت هناك حاجة إلى تمرير معلمات متعددة ، فيجب إضافة قوسين. على سبيل المثال:
نسخة الكود كما يلي:
var sum = (num1 ، num2) => num1 + num2 ؛
// ما يعادل:
var sum = function (num1 ، num2) {
إرجاع num1 + num2 ؛
} ؛
طريقة SUM () هي إضافة معلمتين وتمرير النتيجة مرة أخرى. الفرق الوحيد من المثال السابق هو تمرير معلمتين ، لذلك يجب أن تكون محاطة بين قوسين. هو مثل الوظائف التقليدية ، مع فواصل بين قوسين مفصولة إلى معلمات. وبالمثل ، إذا كانت الوظيفة لا تحتاج إلى تمريرها في المعلمات ، فيجب استبدالها أيضًا بأقواس فارغة.
نسخة الكود كما يلي: var sum = () => 1 + 2 ؛
// ما يعادل:
var sum = function () {
إرجاع 1 + 2 ؛
} ؛
إذا كنت ترغب في استخدام هيئة وظيفية قياسية ، أو قد يكون هناك المزيد من العبارات للتنفيذ في جسم الوظيفة ، وإرفاق جسم الوظيفة في الأقواس وتحديد قيمة الإرجاع بوضوح. على سبيل المثال:
نسخة الكود كما يلي:
var sum = (num1 ، num2) => {return num1 + num2 ؛ }
// ما يعادل:
var sum = function (num1 ، num2) {
إرجاع num1 + num2 ؛
} ؛
الجزء في الأقواس يعادل بشكل أساسي الوظائف التقليدية ، باستثناء أن معلمة الوسائط غير متوفرة.
لأن الأقواس هي شعار جسم الوظيفة. إذا أرادت وظيفة السهم إرجاع كائن مخصص ، فيجب أن ترفق الكائن بين قوسين أولاً. على سبيل المثال:
نسخة الكود كما يلي:
var getTempitem = id => ({
فعلتُ،
الاسم: "درجة الحرارة"
}) ؛
// ما يعادل:
var getTempitem = function (id) {
يعود {
فعلتُ،
الاسم: "درجة الحرارة"
} ؛
} ؛
كما يتضح من المثال أعلاه ، فإن استخدام الأقواس لتشمل قوسين مجعد هو تعريف الكائن ، وليس جسم الوظيفة.
2. الاستخدام
أحد الأخطاء الأكثر شيوعًا في جافا سكريبت هو هذا الارتباط داخل الوظيفة. نظرًا لأن هذا يأخذ القيمة وفقًا لبيئة التنفيذ الحالية للوظيفة ، فإنه سيؤدي إلى سوء فهم عند الاتصال ، مما يؤدي إلى تأثير على الأشياء الأخرى غير ذات الصلة. انظر المثال التالي:
نسخة الكود كما يلي:
var pagehandler = {
ID: "123456" ،
init: function () {
document.adDeventListener ("Click" ، Function (event) {
this.dosomething (event.type) ؛ // خطأ
}، خطأ شنيع)؛
} ،
dosomething: function (type) {
console.log ("معالجة" + type + "لـ" + this.id) ؛
}
} ؛
في هذا الرمز ، تتمثل النية الأصلية في السماح لطريقة init () الخاصة بـ PageHandler لإنشاء التفاعلات والاتصال بهذا. dosomething () في وظيفة معالج الأحداث. ومع ذلك ، لا يتم تنفيذ الرمز وفقًا لقصد التصميم الأصلي. في وقت التشغيل ، يشير هذا إلى الكائن العالمي بدلاً من PageHandler ، والذي يسبب هذا.
بالطبع ، يمكنك استخدام BIND () في الوظيفة لربط هذا بشكل صريح مع PageHandler ، انظر أدناه:
نسخة الكود كما يلي:
var pagehandler = {
ID: "123456" ،
init: function () {
document.adDeventListener ("Click" ، (Function (event) {
this.dosomething (event.type) ؛
}). ربط (هذا) ، خطأ) ؛
} ،
dosomething: function (type) {
console.log ("معالجة" + type + "لـ" + this.id) ؛
}
} ؛
على الرغم من أنه يبدو غريبًا بعض الشيء ، إلا أن تنفيذ الكود يتماشى الآن مع التوقعات. من خلال استدعاء الربط (هذا) للوظيفة ، يتم إنشاء وظيفة جديدة ارتبطت مع هذا الحالي ، مما يعني أنه يتم تضمين طبقة أخرى من أجل تحقيق الغرض.
نظرًا لأن وظيفة السهم تدعم هذه الرابطة بالفعل ، فسيكون من المنعش استخدام وظيفة السهم هنا. انظر المثال التالي:
نسخة الكود كما يلي:
var pagehandler = {
ID: "123456" ،
init: function () {
document.adDeventListener ("انقر" ،
event => this.dosomething (event.type) ، false) ؛
} ،
dosomething: function (type) {
console.log ("معالجة" + type + "لـ" + this.id) ؛
}
} ؛
تدعو وظيفة معالجة الأحداث في هذه الحالة وظيفة السهم الخاصة بـ this.dosomething (). قيمة هذا هي قيمة هذا init (). لذلك ، فإنه يعادل ربط ().
إن الطبيعة الموجزة والموجزة لوظائف الأسهم تجعلها خيارًا مثاليًا للمتغيرات المستقلة للوظائف الأخرى. على سبيل المثال ، لاستخدام مقارنة مخصصة لترتيب المصفوفات على ES5 ، راجع الكود النموذجي أدناه:
نسخة الكود كما يلي:
var result = values.sort (function (a ، b) {
إرجاع أ - ب ؛
}) ؛
يستخدم المثال أعلاه العديد من بناء الجملة لتنفيذ عملية بسيطة. إذا كنت تستخدم وظائف السهم ، فيمكنك كتابة رمز دقيق للغاية:
نسخة الكود كما يلي:
var result = values.sort ((a ، b) => a - b) ؛
تدعم طرق التصنيف/الخريطة/تقليل المصفوفات وظائف رد الاتصال. يمكن أن يؤدي استخدام وظائف الأسهم إلى تبسيط عملية الكتابة وتحرير يديك للقيام بما تريد.
3. ملحق
تختلف وظائف الأسهم بالفعل عن الوظائف التقليدية ، لكن لا تزال لديها خصائص مشتركة. على سبيل المثال:
1. عملية typeof على وظيفة السهم ستعيد "وظيفة".
2. لا تزال وظيفة السهم مثيلًا للوظيفة ، وبالتالي فإن طريقة تنفيذ مثيل OF تتفق مع وظيفة الوظائف التقليدية.
3. لا تزال طريقة Call/apply/bind قابلة للتطبيق على وظائف الأسهم ، ولكن حتى إذا تم استدعاء هذه الطرق لتوسيع نطاق النطاق الحالي ، فلن يتغير هذا.
الفرق الأكبر بين وظائف الأسهم والوظائف التقليدية هو أن العمليات الجديدة معاق.
4. الخلاصة
وظيفة السهم هي ميزة جديدة لـ ECMASCRIPT 6 جذبت الكثير من الاهتمام ويتم تحسينها باستمرار. إنه اتجاه عام لاستخدام قواعد نصية موجزة لتحديد عملية كتابة وظائف أو عبارات ، وسيكون بالتأكيد لا يقهر ولا يمكن لأحد إيقافها. ارتباطها بالكلمة الرئيسية التي يجعل المطورين لم يعد منزعجًا وتحسينه لتحسين الأداء من خلال محرك JavaScript. الحديث عن هذا ، أصدقائي عطشان بالفعل. إذا كنت ترغب في تجربة وظيفة السهم ، فما عليك سوى فتح أحدث إصدار من Firefox.