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

ما هذا؟

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

السياق العالمي

عند استخدامه في السياق العام (خارج أي وظيفة أو كائن)، يشير هذا إلى الكائن العام. في متصفح الويب، الكائن العام هو window.

console.log(this); // In a browser, this will log the window object

سياق الوظيفة

عند استخدامه داخل دالة، فهذا يعتمد على كيفية استدعاء الدالة.

استدعاء الوظيفة العادية

في استدعاء دالة عادية، يشير هذا إلى الكائن العام (أو غير محدد في الوضع الصارم).

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

showThis(); // Logs window (or undefined in strict mode)

طريقة النداء

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

const person = {
  name: 'Alice',
  greet: function() {
    console.log(this.name);
  }
};

person.greet(); // Logs "Alice"

سياق المنشئ

عند استخدام دالة كمنشئ باستخدام الكلمة الأساسية الجديدة، يشير هذا إلى المثيل الذي تم إنشاؤه حديثًا.

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

const bob = new Person('Bob');
console.log(bob.name); // Logs "Bob"

وظائف السهم

وظائف السهم لها سلوك مختلف. ليس لديهم هذا السياق الخاص بهم؛ بدلاً من ذلك، يرثون هذا من السياق المعجمي المحيط.

const obj = {
  name: 'Carol',
  regularFunction: function() {
    console.log(this.name);
  },
  arrowFunction: () => {
    console.log(this.name);
  }
};

obj.regularFunction(); // Logs "Carol"
obj.arrowFunction();   // Logs undefined (or the global object in non-strict mode)

معالجات الأحداث

في معالجات الأحداث، يشير هذا إلى العنصر الذي استقبل الحدث.

document.getElementById('myButton').addEventListener('click', function() {
  console.log(this); // Logs the button element
});

ملزمة صريحة

توفر JavaScript طرقًا لتعيين قيمة هذا بشكل صريح باستخدام الاستدعاء والتطبيق والربط.

اتصل وتقدم

تسمح لك طرق الاستدعاء والتطبيق باستدعاء دالة بقيمة محددة.

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

const person = { name: 'Dave' };

introduce.call(person); // Logs "Hello, my name is Dave"
introduce.apply(person); // Logs "Hello, my name is Dave"

الفرق بين الاتصال والتطبيق هو كيفية التعامل مع الوسائط. يأخذ الاستدعاء الوسائط بشكل فردي، بينما يأخذها التطبيق كمصفوفة.

ربط

ينشئ أسلوب الربط وظيفة جديدة، عند استدعائها، يتم تعيين هذه القيمة على القيمة المقدمة.

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

const person = { name: 'Eve' };

const boundIntroduce = introduce.bind(person);
boundIntroduce(); // Logs "Hello, my name is Eve"

خاتمة

يعد فهم هذه الكلمة الأساسية أمرًا ضروريًا لإتقان JavaScript. ومن خلال التعرف على كيفية تصرف ذلك في سياقات مختلفة، يمكنك كتابة تعليمات برمجية أكثر قابلية للتنبؤ بها وقابلة للصيانة. سواء كنت تعمل باستخدام الأساليب، أو المنشئات، أو وظائف الأسهم، فإن معرفة كيفية عمل ذلك ستساعدك على تجنب المخاطر الشائعة وتسخير قوتها بفعالية.