أريد شرح لمفاهيم IIFE و this ودوال call() و apply() و bind()

مرحباً! سأشرح لك كل من المفاهيم التالية في جافاسكريبت بشكل مفصل مع الأمثلة.

1. IIFE (Immediately Invoked Function Expression)

التعريف: IIFE هو تعبير دالة يتم تنفيذه مباشرة بعد تعريفه. يستخدم عادة لتجنب التلوث العالمي للمساحة الأسمية (namespace) وحماية المتغيرات داخل نطاق الدالة من التداخل مع المتغيرات الأخرى.

مثال:

(function() {
    var message = "Hello, world!";
    console.log(message); // "Hello, world!"
})();

في هذا المثال، يتم تعريف دالة وإدارتها مباشرة. المتغير message هنا محمي داخل نطاق هذه الدالة فقط.

2. this

التعريف: في جافاسكريبت، الكلمة الرئيسية this تشير إلى الكائن الذي يتم تنفيذ الدالة عليه. معنى this يمكن أن يتغير بناءً على كيفية استدعاء الدالة.

مثال:

function show() {
    console.log(this);
}

const obj = {
    name: 'Alice',
    show: show
};

obj.show(); // { name: 'Alice', show: [Function: show] }

هنا، this يشير إلى الكائن obj لأن الدالة show تم استدعاؤها كجزء من الكائن obj.

3. call() و apply() و bind()

التعريف: هذه الطرق تستخدم لتحديد قيمة this في دالة معينة.

call()

التعريف: تتيح لك طريقة call() استدعاء دالة مع تحديد قيمة this والوسائط التي سيتم تمريرها إلى الدالة.

مثال:

function greet(greeting, punctuation) {
    console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: 'John' };

greet.call(person, 'Hello', '!'); // "Hello, John!"

هنا، greet.call(person, 'Hello', '!') يستدعي الدالة greet ويحدد this ليشير إلى الكائن person.

apply()

التعريف: تعمل طريقة apply() مثل call()، ولكنها تأخذ الوسائط كصفيف بدلاً من قائمة من القيم.

مثال:

function greet(greeting, punctuation) {
    console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: 'Jane' };

greet.apply(person, ['Hi', '?']); // "Hi, Jane?"

هنا، greet.apply(person, ['Hi', '?']) يستدعي الدالة greet ويحدد this ليشير إلى الكائن person، ويمرر الوسائط كصفيف.

bind()

التعريف: تقوم طريقة bind() بإنشاء دالة جديدة ذات قيمة this محددة والوسائط المبدئية، ولكنها لا تقوم بتنفيذ الدالة على الفور.

مثال:

function greet(greeting, punctuation) {
    console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: 'Emma' };

const greetEmma = greet.bind(person, 'Hey');
greetEmma('!!'); // "Hey, Emma!!"

هنا، greet.bind(person, 'Hey') ينشئ دالة جديدة حيث this يشير إلى الكائن person، وتكون الوسائط المبدئية هي 'Hey'. وعندما نستخدم greetEmma('!!')، يتم استدعاء الدالة مع الوسائط المضافة.

التلخيص:

IIFE: يستخدم لتنفيذ دالة فوراً وعزل المتغيرات.

this: يشير إلى الكائن الذي يتم تنفيذ الدالة عليه.

call() و apply(): تستخدم لتحديد قيمة this في الدالة، مع اختلاف في كيفية تمرير الوسائط.

bind(): تستخدم لإنشاء دالة جديدة مع تحديد قيمة this ووسائط مبدئية، دون تنفيذها فوراً.

أتمنى أن يكون هذا قد ساعدك في فهم هذه المفاهيم!