دوال الكائنات في JavaScript: كيف تضيف سلوكاً ذكياً داخل Object؟

الكائن لا يخزن البيانات فقط، يمكنه أيضاً "القيام بأفعال". عندما نضع دالة داخل object، نسميها Method.

إذا كنت تبحث عن شرح methods في JavaScript أو كيف أستخدم this داخل object أو الفرق بين method والدالة العادية، فهذا الدرس يشرحها عملياً.

ما هي Method في JavaScript؟

method هي دالة مخزنة داخل object كخاصية. الهدف: ربط البيانات (properties) بالسلوك (methods) في نفس المكان.

قاعدة بسيطة: Object = بيانات + أفعال. البيانات = properties، الأفعال = methods.

1) تعريف Method داخل object

const person = {
  name: 'علي',
  sayHello: function () {
    console.log('مرحباً، أنا ' + this.name);
  }
};

ماذا يفعل هذا الكود؟ ينشئ كائناً فيه خاصية name ودالة sayHello.

النتيجة المتوقعة: method جاهزة للاستدعاء من نفس object.

خطأ شائع: نسيان كلمة function في الصياغة التقليدية (أو كتابة فاصلة ناقصة).

2) استدعاء Method

person.sayHello(); // مرحباً، أنا علي

ماذا يفعل هذا الكود؟ يشغّل method عبر اسم الكائن ثم النقطة.

النتيجة المتوقعة: طباعة الرسالة المرتبطة ببيانات الشخص.

خطأ شائع: استدعاء sayHello() بدون person. في سياق لا يحتوي الدالة.

3) فهم this داخل method

const car = {
  brand: 'Toyota',
  model: 'Corolla',
  fullName: function () {
    return this.brand + ' ' + this.model;
  }
};

console.log(car.fullName()); // Toyota Corolla

ماذا يفعل هذا الكود؟ يستخدم this للوصول لخصائص نفس الكائن.

النتيجة المتوقعة: دمج قيم brand وmodel وإرجاعها.

خطأ شائع: استخدام اسم كائن ثابت داخل method بدل this، مما يقلل مرونة إعادة الاستخدام.

4) صيغة مختصرة للـ methods

const user = {
  name: 'Sara',
  greet() {
    console.log('Hi ' + this.name);
  }
};

user.greet();

ماذا يفعل هذا الكود؟ يعرّف method بصيغة أقصر في object literals.

النتيجة المتوقعة: نفس سلوك الطريقة التقليدية مع كود أنظف.

خطأ شائع: الخلط بين الصيغة المختصرة وarrow function.

5) تنبيه مهم: Arrow Function مع this

const person = {
  name: 'Lina',
  badGreet: () => {
    console.log(this.name); // غالباً undefined
  }
};

person.badGreet();

ماذا يفعل هذا الكود؟ يوضح أن arrow function لا تملك this مرتبطاً بالكائن نفسه.

النتيجة المتوقعة: this قد لا يشير إلى person داخل السهم.

خطأ شائع: استخدام arrow method مع الاعتماد على this ثم ظهور نتائج غريبة.

6) Method تعدّل خصائص object

const counter = {
  value: 0,
  increment() {
    this.value++;
  }
};

counter.increment();
counter.increment();
console.log(counter.value); // 2

ماذا يفعل هذا الكود؟ method تغيّر حالة object داخلياً.

النتيجة المتوقعة: تحديث value كل مرة تستدعي increment.

خطأ شائع: نسيان this وكتابة value++ مباشرة.

Story قصيرة: لماذا this.name أصبحت undefined؟

مبتدئ كتب method بـ arrow function داخل object. استدعى الدالة فظهرت undefined بدل الاسم. بعد تحويلها إلى function عادية داخل الكائن، اشتغل this بشكل صحيح.

const account = {
  owner: 'Rachid',
  showOwner() {
    console.log(this.owner);
  }
};

account.showOwner();

Checklist سريعة قبل كتابة Method

• هل الدالة مرتبطة بسلوك هذا الكائن تحديداً؟
• هل تحتاج this للوصول إلى خصائص object؟
• هل استخدمت function عادية بدل arrow عند الحاجة لـ this؟
• هل استدعيت method عبر object.method()؟

روابط المتابعة بعد هذا الدرس

الخطوة التالية مباشرة: مقدمة Strings في JavaScript ثم أهم String Methods في JavaScript.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

ما هي Methods في JavaScript؟

هي دوال مخزنة داخل object وتصف سلوكه.

ما معنى this داخل method؟

this تشير غالباً للكائن الذي استدعى method.

هل يمكن استخدام arrow function كـ method؟

يمكن، لكن يفضّل تجنبها عندما تحتاج this لأنها لا تملك this الخاص بها.

كيف أستدعي method بشكل صحيح؟

عبر اسم الكائن ثم النقطة ثم اسم method مع الأقواس.

متى أستخدم methods داخل object؟

عندما تريد ربط عمليات وسلوك ببيانات الكائن نفسه.

للمتابعة مباشرة: ابدأ بدرس مقدمة Strings في JavaScript ثم انتقل إلى أهم String Methods في JavaScript.