٤.٩ الكائن window والكلمة this

الكائن window

التمرين 1: اعرض تنبيهًا يحمل اسمك باستخدام JavaScript.

alert("Nawras");

التمرين 2: أعد تنفيذ التمرين 1 باستخدام window.alert().

window.alert("Nawras")

التمرين 3: اطبع window في وحدة التحكم.

console.log(window);

النتيجة هي: Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

التمرين 4: ما نوع window؟ تلميح: استخدم typeof window.

console.log(typeof window);

النتيجة هي: object

التمرين 5: مثّل صفحة ويب بكائن عنوانه "Window Object" ووصفه "What is the window object? and what does it represent?"، واعرضه.

var webPage = {
  title: "Window Object",
  description: "What is the window object? and what does it represent?"
};

console.log(webPage);

النتيجة هي: {title: "Window Object", description: "What is the window object? and what does it represent?"}

التمرين 6: ارجع إلى التمرين 5؛ اطبع window.webPage في وحدة التحكم. ما النتيجة؟

var webPage = {
  title: "Window Object",
  description: "What is the window object? and what does it represent?"
};

console.log(window.webPage);

النتيجة هي: {title: "Window Object", description: "What is the window object? and what does it represent?"}

التمرين 7: ارجع إلى التمرين 5؛ هل webPage خاصية في window ؟

var webPage = {
  title: "Window Object",
  description: "What is the window object? and what does it represent?"
};

console.log(window.hasOwnProperty("webPage"));

النتيجة هي: true

التمرين 8: خزّن "Only knowledge can free and save us, but with knowledge must go virtue." في متغير واطبعه.

var myWord = "Only knowledge can free and save us, but with knowledge must go virtue.";

console.log(myWord);

النتيجة هي: Only knowledge can free and save us, but with knowledge must go virtue.

التمرين 9: ارجع إلى التمرين 8؛ اطبع window.myWord في وحدة التحكم. ما النتيجة؟

var myWord = "Only knowledge can free and save us, but with knowledge must go virtue.";

console.log(window.myWord);

النتيجة هي: Only knowledge can free and save us, but with knowledge must go virtue.

التمرين 10: ارجع إلى التمرين 8؛ هل myWord خاصية في window ؟

var myWord = "Only knowledge can free and save us, but with knowledge must go virtue.";

console.log(window.hasOwnProperty("myWord"));

النتيجة هي: true

التمرين 11: أنشئ تعبير دالة يُرجع true، واطبع النتيجة.

var returnsTrue = () => true;

console.log(returnsTrue());

النتيجة هي: true

التمرين 12: ارجع إلى التمرين 11؛ اطبع window.returnsTrue في وحدة التحكم. ما النتيجة؟

var returnsTrue = () => true;

console.log(window.returnsTrue());

النتيجة هي: true

التمرين 13: ارجع إلى التمرين 11؛ هل returnsTrue خاصية في window ؟

var returnsTrue = () => true;

console.log(window.hasOwnProperty("returnsTrue"));

النتيجة هي: true

الكائن window

يمثّل window نافذة المتصفح الحالية.

في السكربت التقليدي بالمتصفح، تُضاف تصريحات var العامة إلى window. لا ينطبق ذلك على let وconst أو نطاق الوحدات.

التصريحات العامة عن الدوال في السكربت التقليدي بالمتصفح تصبح خصائص في window أيضًا.

---

الكلمة المفتاحية this

السياق العام

التمرين 14: لديك الكائن التالي. ما نتيجة this.obj.

var webPage = {
  title: "Window Object",
  description: "What is the window object? and what does it represent?"
};

console.log(this.webPage);

النتيجة هي: {title: "Window Object", description: "What is the window object? and what does it represent?"}

التمرين 15: لديك المتغير التالي. ما نتيجة this.variable.

var myWord = "Only knowledge can free and save us, but with knowledge must go virtue.";

console.log(this.myWord);

النتيجة هي: Only knowledge can free and save us, but with knowledge must go virtue.

التمرين 16: لديك الدالة التالية. ما نتيجة this.func.

var returnsTrue = () => true;

console.log(this.returnsTrue());

النتيجة هي: true

التمرين 17: ما نتيجة window === this?

console.log(window === this);

النتيجة هي: true

this في السياق العام

this تشير إلى window في المستوى الأعلى لسكربت متصفح تقليدي؛ أما في وحدات JavaScript فتكون undefined.

سياق الدالة

التمرين 18: أنشئ دالة عادية تُرجع this .

function returnsThis(){
  return this;
}

console.log(returnsThis());

النتيجة هي: Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

التمرين 19: تأمّل الشيفرة التالية.

var a = "I'm in the global scope";

function returnsA(){
  var a = "I'm in the local scope";
  return this.a;
}

console.log(returnsA());

النتيجة هي: I'm in the global scope

this في سياق الدالة

this تشير إلى window عند الاستدعاء العادي لدالة غير صارمة في المتصفح. في الوضع الصارم تكون undefined؛ وتتغيّر بحسب طريقة الاستدعاء.

الكائنات

التمرين 20: مثّل حاسوبًا محمولًا بمعالج Intel i5 وذاكرة 2GB وذاكرة إضافية 4GB وتخزين 0.5TB.

var laptop = {
  processor: "i5",
  ram: 2,
  storage: "0.5TB",
  additionalRAM : 4
};

console.log(laptop);

النتيجة هي: {processor: "i5", ram: 2, storage: "0.5TB", additionalRAM: 4}

التمرين 21: أعد إنشاء كائن التمرين 20، وأضف totalRAM خاصيةً قيمتها ناتج جمع additionalRAM على ram.

var laptop = {
  processor: "i5",
  ram: 2,
  storage: "0.5TB",
  additionalRAM : 4,
  totalRAM: ram + additionalRAM
};

console.log(laptop);

النتيجة هي: Uncaught ReferenceError: ram is not defined

ram هو في الواقع window.ram، ولا يوجد متغير عام باسم ram في البرنامج، لذلك حدث الخطأ.

التمرين 22: استخدم الدالة this.ram و this.additionalRAM بدلًا من ram و additionalRAMعلى الترتيب.

var laptop = {
  processor: "i5",
  ram: 2,
  storage: "0.5TB",
  additionalRAM : 4,
  totalRAM: this.ram + this.additionalRAM
};

console.log(laptop.totalRAM);

النتيجة هي: NaN

this.ram و this.additionalRAM غير مُعرّفين في النطاق العام، لذا كلاهما this.ram و this.additionalRAM قيمته undefined.

undefined + undefined تكون نتيجته NaN.

التمرين 23: تأمّل الشيفرة التالية.

var laptop = {
  processor: "i5",
  ram: 2,
  storage: "0.5TB",
  additionalRAM : 4,
  totalRAM: function(){
    return this.ram + this.additionalRAM;
  }
};

console.log(laptop.totalRAM());

النتيجة هي: 6

totalRAM طريقة للكائن لأن قيمتها دالة.

في task 23; this تشير إلى laptop نفسه.

التمرين 24: أعد تنفيذ task 23؛ أرجع this من totalRAM ؟

var laptop = {
  processor: "i5",
  ram: 2,
  storage: "0.5TB",
  additionalRAM : 4,
  totalRAM: function(){
    return this;
  }
};

console.log(laptop.totalRAM());

النتيجة هي: {processor: "i5", ram: 2, storage: "0.5TB", additionalRAM: 4, totalRAM: ƒ}

this داخل الكائن

this لا ينشئ تعريف الكائن الحرفي ربطًا جديدًا لـthis؛ فتتبع السياق المحيط. أما عند استدعاء طريقة عادية بصيغة object.method()، فتشير this إلى object.