استخدام this في الدوال جافاسكربت

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

تعتبر جافاسكربت واحدة من أهم لغات البرمجة في العصر الحالي، حيث تتيح للمطورين بناء تطبيقات ويب ديناميكية ومتفاعلة. من بين أهم المفاهيم التي يجب على كل مبرمج جافاسكربت أن يكون على دراية بها هو مفهوم الدوال في الكائنات وكيفية استخدام الكلمة المفتاحية this داخل هذه الدوال. هذا المقال يتناول شرحاً مفصلاً حول كيفية عمل الدوال داخل الكائنات، وكيفية تأثير الكلمة المفتاحية this على طريقة تنفيذ هذه الدوال.

1. الكائنات في جافاسكربت

الكائنات في جافاسكربت هي عبارة عن نوع خاص من البيانات يمكنه تخزين قيم متعددة تحت مفاتيح مختلفة. يتكون الكائن من مجموعة من الخصائص (properties) التي تمثل البيانات والدوال (methods) التي تمثل العمليات أو السلوكيات التي يمكن تنفيذها على هذه البيانات. في جافاسكربت، يتم تعريف الكائنات باستخدام الأقواس المعقوفة {} وتحتوي على مجموعة من الخصائص والدوال التي يمكن الوصول إليها باستخدام النقطة (.).

على سبيل المثال:

javascript
CopyEdit
let person = {
  name: "Ali",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

في الكود أعلاه، لدينا كائن person الذي يحتوي على خصائص name و age، بالإضافة إلى دالة greet التي تطبع رسالة ترحيبية باستخدام قيمة خاصية name داخل الكائن. لكن يبقى السؤال: كيف يتعامل جافاسكربت مع الكلمة المفتاحية this داخل الدوال؟

2. الكلمة المفتاحية this في جافاسكربت

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

في المثال السابق:

javascript
CopyEdit
let person = {
  name: "Ali",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

عند استدعاء person.greet(), الكلمة المفتاحية this تشير إلى الكائن person. لذلك، سيتم طباعة:

pgsql
CopyEdit
Hello, my name is Ali

3. كيفية تأثير السياق على this في جافاسكربت

السياق الذي يتم فيه استدعاء الدالة هو العامل الأساسي الذي يحدد القيمة التي تشير إليها this. يمكن توضيح ذلك من خلال عدة حالات رئيسية:

أ. داخل الكائن

كما رأينا في المثال الأول، داخل الكائن، this تشير إلى الكائن الذي يحتوي على الدالة. في الكود التالي:

javascript
CopyEdit
let car = {
  brand: "Toyota",
  model: "Camry",
  year: 2020,
  getCarInfo: function() {
    return `${this.brand} ${this.model}, ${this.year}`;
  }
};

console.log(car.getCarInfo());  // Toyota Camry, 2020

في هذا المثال، this داخل دالة getCarInfo تشير إلى الكائن car، وبالتالي يتم إرجاع معلومات السيارة بشكل صحيح.

ب. في دالة مستقلة

إذا تم استخدام this داخل دالة مستقلة (وليس داخل كائن)، فالقيمة التي تشير إليها this ستكون غير محددة في وضع “strict mode”، بينما في الوضع العادي (non-strict mode)، تشير this إلى الكائن window في بيئة المتصفح.

مثال:

javascript
CopyEdit
function showGlobalThis() {
  console.log(this);
}

showGlobalThis();  // في الوضع غير الصارم: window أو global

ج. في الدوال المعتمدة على الأسلوب arrow functions

الدوال باستخدام الأسهم (arrow functions) تختلف عن الدوال التقليدية في جافاسكربت، حيث لا تمتلك this خاص بها. بدلاً من ذلك، يتم تحديد قيمة this بناءً على السياق الذي تم فيه إنشاء الدالة. بمعنى آخر، this في الدوال السهمية تُورث من السياق الذي تم فيه تعريف الدالة.

مثال:

javascript
CopyEdit
let person = {
  name: "Ali",
  greet: function() {
    let innerGreet = () => {
      console.log("Hello, my name is " + this.name);
    };
    innerGreet();
  }
};

person.greet();  // Hello, my name is Ali

هنا، this في دالة innerGreet تشير إلى نفس الكائن الذي يحتوي على دالة greet (أي الكائن person) بسبب أن الدوال السهمية تُورث this من السياق الخارجي.

د. تغيير قيمة this باستخدام call و apply

جافاسكربت توفر طريقتين لتغيير سياق this داخل الدالة باستخدام call و apply. هاتان الطريقتان تسمحان لنا بتمرير كائن معين كقيمة لـ this.

javascript
CopyEdit
function greetPerson() {
  console.log("Hello, my name is " + this.name);
}

let person = { name: "Ali" };
let person2 = { name: "Sara" };

greetPerson.call(person);  // Hello, my name is Ali
greetPerson.apply(person2); // Hello, my name is Sara

هنا، call و apply يسمحان لنا بتغيير سياق this ليشير إلى الكائن الذي نمرره (أي person أو person2).

هـ. استخدام bind مع this

يمكنك استخدام الدالة bind لإنشاء نسخة جديدة من الدالة التي تكون قيمة this فيها ثابتة، حتى لو تغير السياق عند استدعاء الدالة.

javascript
CopyEdit
function greet() {
  console.log("Hello, my name is " + this.name);
}

let person = { name: "Ali" };
let greetPerson = greet.bind(person);
greetPerson();  // Hello, my name is Ali

في هذا المثال، greet.bind(person) ينشئ دالة جديدة بحيث تكون قيمة this دائمًا هي الكائن person عند استدعاء الدالة.

4. أمثلة عملية لاستخدام this في الدوال داخل الكائنات

أ. محاكاة الكائنات الحية

يمكنك استخدام this لتنفيذ مهام معقدة داخل كائنات تمثل كيانات حية. على سبيل المثال، يمكنك تعريف كائن يمثل حيوان ويحتوي على دوال للتفاعل مع خصائصه.

javascript
CopyEdit
let animal = {
  name: "Tiger",
  age: 5,
  sound: "Roar",
  makeSound: function() {
    console.log(this.sound);
  },
  describe: function() {
    console.log(`${this.name} is ${this.age} years old.`);
  }
};

animal.makeSound();  // Roar
animal.describe();    // Tiger is 5 years old.

في هذا المثال، الكائن animal يحتوي على خصائص name و age و sound، بالإضافة إلى دوال makeSound و describe التي تستخدم this للوصول إلى هذه الخصائص.

ب. إدارة الحسابات المالية

يمكنك استخدام الدوال والكائنات في جافاسكربت لإدارة الحسابات المالية أو حساب الأرصدة.

javascript
CopyEdit
let account = {
  balance: 1000,
  deposit: function(amount) {
    this.balance += amount;
    console.log(`Deposited ${amount}, new balance: ${this.balance}`);
  },
  withdraw: function(amount) {
    if (this.balance >= amount) {
      this.balance -= amount;
      console.log(`Withdrew ${amount}, new balance: ${this.balance}`);
    } else {
      console.log("Insufficient funds");
    }
  }
};

account.deposit(500);  // Deposited 500, new balance: 1500
account.withdraw(300); // Withdrew 300, new balance: 1200

هنا، الدوال deposit و withdraw تستخدم this لتحديث رصيد الحساب داخل الكائن account.

5. خاتمة

الفهم الجيد لكيفية عمل الدوال داخل الكائنات واستخدام الكلمة المفتاحية this في جافاسكربت هو أمر حيوي لكل مبرمج، خاصة عند التعامل مع تطبيقات معقدة وبيانات كبيرة. على الرغم من أن this قد تكون محيرة في بعض الأحيان، فإن قدرتك على التحكم فيها واستخدامها بفعالية تفتح أمامك آفاقًا واسعة من الإمكانيات.