فهم الكلمة الرئيسية "هذا" في JavaScript

'هذا' في JavaScript

في JavaScript الأمر أكثر تعقيدًا لأنه حيث هذا لا يعتمد فقط على كيفية تعريف الدالة ولكن أيضًا على شكل استدعائها.

ألق نظرة على كيفية هذا يعمل حسب مكان الاستدعاء وشكله.

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

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

هذا؛ // النافذة

طريقة الكائن الداخلي

يُستخدم داخل أسلوب كائن مرتبط بأقرب كائن مرفق. الكائن هو السياق الجديد لـ هذا كلمة رئيسية. لاحظ أنه لا يجب عليك تغيير الدالة () إلى بناء جملة ES6 مرح: () => هذا السياق: () => هذا السياق لأنه سيغير السياق.

const obj = {
  السياق: "كائن",
  متعة: دالة() {
    إرجاع هذا السياق;
  }
};

obj.fun()؛ // كائن

في هذا المثال مع كائن متداخل, هذا لا يزال يشير إلى سياقه الأقرب.

const nestedObj = {
  السياق: "الأصل",
  الطفل: {
    السياق: "تابع",
    متعة: دالة() {
      إرجاع هذا السياق;
    }
  }
};

nestedObj.child.fun()؛ // الطفل

وظيفة خارج السياق

تُستخدم داخل دالة ليس لها سياق (ليس لها كائن كأصل) مرتبطة بالسياق العام، حتى لو كانت الدالة مُعرّفة داخل الكائن.

لاحظ أننا نستخدم متغير السياق بدلاً من السماح/سياق السياق لأن دعنا و تشكل تغيير السياق المتغير المرفق المتغير. فار دائمًا الأقرب إلى سياق التنفيذ العام. دعنا و تشكل إعلان المتغيرات في نطاق كتلة محلية فقط.

متغير السياق = "عالمي";

const obj = {
  السياق: "كائن",
  funA: دالة() {
    دالة funB() { {
      const context = "دالة";
      إرجاع هذا السياق;
    }
    إرجاع funB()؛ // تم استدعاؤها بدون سياق
  }
};

obj.funA()؛ // عالمي

داخل دالة المنشئ الداخلية

تُستخدم داخل دالة تكون منشئ الكائن الجديد المرتبط بها.

متغير السياق = "عالمي";

دالة Obj() {
  هذا السياق = "سياق Obj";
}

const obj = Obj الجديد();
سياق obj.context; // سياق Obj

دالة داخلية محددة في سلسلة النماذج الأولية

تُستخدم داخل دالة مُعرّفة في سلسلة النماذج الأولية لإنشاء كائن مرتبط بها.

const ProtoObj = {
  متعة: دالة() {
    إرجاع هذا.name;
  }
};

const obj = Object.create.create(ProtoObj);
obj.name = "foo";
obj.fun()؛ // foo

في الداخل استدعاء() وتطبيق() الدالتين

استدعاء() و تطبيق() هي JavaScript الدوال. باستخدام هذه الدوال، يمكن للكائن استخدام أساليب تنتمي إلى كائن آخر. استدعاء() يأخذ الوسيطات بشكل منفصل حيث تطبيق() يأخذها كمصفوفة.

هذا مرتبط هنا بالسياق الجديد المتغير في استدعاء() و تطبيق() الأساليب.

const objA = {
  السياق: "objA",
  متعة: دالة() {
    console.log(this.context, arguments);
  }
};

const objB = {
  السياق: "objB"
};

objA.fun(1، 2)؛ // objA، [1، 2]
objA.fun.call(objB، 1، 2، 3)؛ // objB، [1، 2، 3]
objA.fun.apply(objB, [1, 2, 3, 4])؛ // objB, [1, 2, 3, 4]

داخل دالة الربط()

ربط() هي أيضًا طريقة JavaScript. فهي تنشئ دالة جديدة تحتوي على هذا إلى المعامل الأول الذي تم تمريره إلى ربط()**.**

const objA = {
  السياق: "objA",
  متعة: دالة() {
    console.log(this.context, arguments);
  }
};

const objB = {
  السياق: "objB"
};

const fun = objA.fun.bind(objB, 1, 2);
متعة (3، 4)؛ // objB، [1، 2، 3، 4]

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

يُستخدم في أي معالج أحداث (على سبيل المثال, مُضيف الحدث، عند النقر، إرفاق الحدث)، فهو مرتبط بعنصر DOM الذي ارتبط به الحدث.

document.querySelector(".foo").addEventListener("click", function() {
  هذا؛ // يشير إلى عنصر القسمة 'foo'
});

دالة السهم ES6

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

const globalArrowFunction = () => هذا;

globalArrowFunction()؛ // النافذة

const obj = {
  السياق: "كائن",
  funA: () => هذا,
  funB: دالة() {
    إرجاع () => {
      إرجاع هذا السياق;
    };
  }
};

obj.funA()؛ // النافذة
obj.funB()()؛ // الكائن

اقرأ المزيد:

• أكبر التحديات في تطوير البرمجيات المخصصة
• ما هي الاختلافات بين دار البرمجيات ووكالة توظيف تكنولوجيا المعلومات؟