شرح للكلمة المحجوزة "this" في جافاسكريبت وكيفية استخدامها بشكل مفصل

لأكون واضحًا معك، لن تفهم الأمر بشكل واضح إلا إذا قمت بدراسة الدالة البانية Constructor  والسياق والنطاق Context and Scope وPrototype والتعرف على الطرق المختلفة لاستدعاء الدوال في جافاسكريبت، مثل استدعاء الدوال من كائنات، واستدعاءها كدوال عادية، واستدعاءها باستخدام الدوال السهمية، واستدعاءها باستخدام الـapply والـcall والـbind.

و "this" ببساطة هي كلمة محجوزة تشير إلى الكائن الحالي الذي يتم تنفيذ الكود فيه، ونستخدم "this" داخل الوظائف والأساليب والأحداث للإشارة إلى الكائن الحالي الذي تم استدعاء الوظيفة أو الأسلوب منه.

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

مثلاً لنفترض أن لدينا كائنًا يُمثل سيارة، ولديه خاصية "السرعة" وأسلوب "تشغيل"، وعند استدعاء أسلوب "تشغيل"، تستخدم "this" للإشارة إلى الكائن الحالي (السيارة) وتغيير خاصية "السرعة" بناءًا على الإجراء المناسب.

وفي جافاسكريبت، قيمة "this" تختلف بين الدوال العادية (Regular Functions) والدوال السهمية (Arrow Functions):

الدوال العادية:

قيمة "this" تشير إلى الكائن الذي يتم استدعاء الدالة منه، أو الكائن الذي يحتوي على الدالة، أي تعتمد قيمة "this" في الدوال العادية على سياق الاستدعاء وطريقة استدعاء الدالة.

والتوضيح من خلال الكود أفضل، ولنبدأ باستخدام "this" في الوظائف المنفصلة:

const person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // الناتج: "Hello, my name is John"

قمت بتعريف دالة greet داخل كائن person، وعند استدعاء الدالة باستخدام person.greet()، تستخدم "this" للإشارة إلى الكائن الحالي (person) والوصول إلى خاصية name لطباعة رسالة تحتوي على اسم الشخص.

الدوال السهمية:

 قيمة "this" ليست مرتبطة بسياق الاستدعاء ولا تتأثر بطريقة الاستدعاء، ولكنها  تستمد قيمتها من النطاق الذي تم تعريف الدالة فيه كالتالي:

const person = {
  name: "John",
  age: 30,
  greet: () => {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // الناتج: "Hello, my name is undefined"

وكما ترى بغض النظر عن كيفية استدعاء الدالة person.greet()، قيمة "this" في الدالة السهمية تشير إلى النطاق العلوي (lexical scope) الذي تم تعريف الدالة فيه، وفي هذه الحالة قيمة this.name ستكون غير معرفة (undefined).

2- استخدام "this" في الأحداث (Events)

const button = document.getElementById("myButton");
button.addEventListener("click", function() {
  console.log("Button clicked by " + this.textContent);
});

تم تعيين حدث النقر (click event) لزر HTML بواسطة addEventListener. عند حدوث النقر، تستدعى الوظيفة المنفذة، وهنا يتم استخدام "this" للإشارة إلى العنصر الذي تم النقر عليه (الزر) وطباعة نص الزر في الكونسول.

3- استخدام "this" في الأشياء الموروثة (Inheritance)

والمثال التالي يفترض أنك على دراسة بالـ prototype.

function Animal(name) {
  this.name = name;
}

Animal.prototype.greet = function() {
  console.log("Hello, I'm " + this.name);
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

const myDog = new Dog("Max", "Labrador");
myDog.greet(); // الناتج: "Hello, I'm Max"

عرفت الدالة Animal وتأخذ معلمة name، ثم قمت بإنشاء دالة greet باستخدام النمط الأساسي للوظائف الموروثة (prototype inheritance).

بالمثل، تعريف الدالة Dog التي ترث من Animal وتضيف خاصية breed، وعند إنشاء كائن Dog واستدعاء الدالة greet، تستخدم"this" للإشارة إلى الكائن الحالي (myDog) واستدعاء greet من النمط الأساسي.

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

ولذلك عند استخدام "this" داخل دالة أو تابع معين، يتم ربط "this" بالكائن الذي تم استدعاءه منه الدالة. هذا يسمح بالوصول إلى البيانات والسلوك المرتبطة بالكائن. مثال عملي: 

// تعريف كلاس Person
class Person {
  constructor(name, age, address, job) {
    this.name = name;
    this.age = age;
    this.address = address;
    this.job = job;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }

  calculateBirthYear() {
    const currentYear = new Date().getFullYear();
    const birthYear = currentYear - this.age;
    return birthYear;
  }
}

// إنشاء كائن Person جديد
const person1 = new Person("John", 30, "New York", "Engineer");

// استخدام الخصائص والطرق في الكائن
console.log(person1.name); // John
console.log(person1.calculateBirthYear()); // يعتمد على السنة الحالية
person1.sayHello(); // Hello, my name is John

في المثال أعلاه، تم إنشاء كلاس "Person" يحتوي على خصائص مثل "name" و "age" و "address" و "job"، بالإضافة إلى توابع "sayHello" و "calculateBirthYear". بحيث تم استخدام معاملات البناء (constructor) لتهيئة الكائن مع القيم المناسبة لكل خاصية. يمكننا إنشاء كائن "person1" باستخدام الكلاس "Person" والوصول إلى الخصائص واستخدام الطرق في الكائن. 

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

توضيح أكثر بساطة: 

• لنقل أننا نريد إنشاء كلاس Car، تتفرع عن هذا الكلاس السيارات BMW, Audi و غيرهما.. 
• يحوي هذا الكلاس تابعا يقوم بحساب سرعة السيارة القصوى. 
• لكي نشير إلى السيارة الواحدة من داخل الكلاس، يجب أن نستعمل الكلمة المفتاحية this لكي تعرف جافاسكربت أن الخاصية التي نحاول قراءتها تخص نموذج Audi من هذا الكلاس فقط.

this في جافاسكريبت تشير إلى الكائن الحالي. وهي مفيدة للعديد من الأغراض:

إلحاق خصائص ومنهجيات بالكائن - في تعريف الكلاس. مثال:

class Person {
  name = "John";
    
  constructor() {
    this.name = "Jane";  
  }  
  
  sayName() {
    console.log(this.name);  
  }
}

استخدام الكلمة الاستدلالية this داخل أي وظيفة للإشارة إلى كائنها. مثال:

function sayHello() {
  console.log(this.name);
}

تمكين وظيفة من الوصول إلى خصائص كائنها عند استدعائها على طريقة دعوة. مثال:

let person = {
  name: "John",
  sayName: function() {
     console.log(this.name);  
  } 
}

person.sayName(); // John

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

let person1 = { name: "John" };
let person2 = { name: "Jane" };

function sayName() {
  console.log(this.name);
}

sayName.call(person1); // John
sayName.call(person2); // Jane

لذلك تمكنك this من العمل بشكل عام ولكن باستخدام خصائص الكائن المحدد فعليًا عند التنفيذ.