מה זה? 8 תרגילים בהבנת המילה השמורה this ב-JavaScript

כולנו מכירים את זה שמילה יכולה לשנות את משמעותה בהתאם להקשר שבו היא מופיעה. קחו לדוגמה את המילה "יד". משמעות המילה היא איבר בגוף, אבל כשהמילה מופיעה בהקשרים שונים, היא יכולה לקבל משמעויות שונות לחלוטין. לדוגמה, "עשו יד אחת" נותן למילה יד משמעות שונה לחלוטין מאשר הביטוי "עמד בחיבוק ידיים" או "יד שנייה", ואפילו צירוף המילים היום יומי "על יד" מעניק לאותה היד משמעות מקורית למדי, אם חושבים על זה לרגע.

וכמו בשפת הקודש, כך גם בשפת ה-JavaScript, ההקשר בהחלט חשוב.

זה המצב עבור מילת המפתח this שמצביעה על ההקשר שבו אנחנו נמצאים, ולפיכך הערך של this משתנה לפי המקום שמשתמשים בה בקוד.

1. מהו this בהקשר הגלובאלי?

נסו להריץ את שורת הקוד הבאה כדי לגלות איזה ערך מקבל this כשאנחנו עובדים ברמה הגלובאלית.

console.log(this);

והתוצאה: window

2. ואם עובדים עם this בתוך פונקציה ברמה הגלובאלית?

נישאר ברמה הגלובאלית, אבל הפעם נברר את ערכו של this כשהוא נמצא בתוך הפונקציה whatsThis שנמצאת ברמה הגלובלית.

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

whatsThis();

והתוצאה גם הפעם היא: window

3. על מה מצביע this כשהוא נמצא בתוך אובייקט?

ומה קורה כשיוצאים מהרמה הגלובאלית, ומבררים את ערכו של this כשהוא נמצא בתוך אובייקט. בדוגמה הבאה, הפונקציה whatsThis נמצאת בתוך האובייקט obj.

var obj = {
  whatsThis: function() {
    console.log(this);
  }
};
obj.whatsThis();// obj

ועכשיו כשנקרא לפונקציה מתוך האובייקט, נראה ש-this מצביע על האובייקט obj שבתוכו הוא נמצא.

זה מאפשר לנו להשתמש בתכונות ובמתודות של האובייקט מתוך האובייקט. לדוגמה:

var obj = {
    a: 'this', 
    b: 'awsome',
    whatsThis: function(){
        return this.a + ' is ' + this.b;
    }
};

obj.whatsThis();// this is awsome

ועכשיו הבעיה, איך נעביר את ערכו של this מהאובייקט לפונקציה שנמצאת מחוץ לאובייקט?

בדוגמה הבאה, אנחנו מנסים להעביר את ערך המשתנים a ו- b מהאובייקט לפונקציה whatsThis.

function whatsThis() {
  return this.a + ' is ' + this.b;
}

var obj = {
  a: 'this', 
  b: 'awsome'
};

whatsThis();// undefined is undefined.

והתוצאה undefined is undefined מלמדת אותנו שלפונקציה אין גישה ל- this כי היא נמצאת בהקשר הגלובלי, ולכן יש לה גישה חופשית למשתנים גלובליים אבל היא לא יכולה לגשת למשתנים שמוחבאים בתוך אובייקטים.

אז מה עושים? כדי לפתור את הבעיה נשתמש ב bind, call ו-apply, שמאפשרות לנו להעביר את this לפונקציה שלא שייכת לאובייקט.

4. שימוש ב-bind כדי להגדיר את האובייקט שאתו הפונקציה צריכה לעבוד

function whatsThis() {
  return this.a + ' is ' + this.b;
}

var obj = {
  a: 'this', b: 'awsome'
};

whatsThis.bind(obj);// This is awsome

השימוש ב- bind מאפשר לנו להעביר לפונקציה עם איזה אובייקט עליה לעבוד. או במילים אחרות על איזה אובייקט this מצביע.

5. על מה מצביע this כשמשתמשים ב-call?

function whatsThis(c) {
  return this.a + ' is ' + this.b + c;
}

var obj = {
  a: 'this', b: 'awsome'
};

var c = ', and so are you.';

whatsThis.call(obj, c);// this is awsome, and so are you.

הפרמטר הראשון שמעבירים ל-call הוא האובייקט, ושאר הפרמטרים הם ארגומנטים רגילים.

6. apply עובד בדומה ל-call

גם כשמשתמשים ב-apply , this מצביע על האובייקט שמועבר כפרמטר לפונקציה. ההבדל הוא שהפרמטר השני שמועבר הוא מערך.

function whatsThis(ar) {
  // extract the content of this to the firstItem variable
  var firstItem = this.a + ' is ' + this.b;
  
  // add the first item variable as the first item in the array.
  ar.unshift(firstItem);
  
  // join the array to string.
  var joinToString = ar.join(' ');
  
  // return the string.
  return joinToString;
}

var obj = {
  a: 'this', b: 'awsome'
};

var array = [',and','so','are','you.'];

whatsThis.call(obj, array); // this is awsome, and so are you.

7. למה מתייחס this במקרה של פונקציה שמופעלת כשמאזינים לאובייקט ב-DOM?

כשמשתמשים ב-this בתוך פונקציה שמופעלת על ידי מאזין לאלמנט ב-DOM, this מקבל את הערך של האלמנט שקרא לפונקציה.

בדוגמה הבאה, נשים מאזין ללחיצה על האלמנט button, ולחיצה על האלמנט קוראת לפונקציה whatsThis.

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

document.getElementById('button').addEventListener('click',function(){whatsThis();});

והתוצאה היא האלמנט button שהוא האלמנט שקרא לפונקציה.

8. ניתן לשמור את this בקאש

ניתן לשמור את this בקאש. בדוגמה הבאה אנחנו רוצים שלחיצה על הכפתור button תשנה את צבעו. נעשה זאת באמצעות הקוד הבא, שבו לחיצה על הכפתור גורמת לשמירת ערכו בקאש, ומשתמשים בערך זה כדי להעביר לפונקציה שמשנה את צבע הכפתור.

function changeBtnColor( elem ){
  elem.style.color = 'red';
}

document.getElementById('button').addEventListener('click', function(){
  var btn = this;
  document.getElementById('div1').style.display = 'none';
  changeBtnColor( btn );
});

הפונקציה changeBtnColor תפעל על האלמנט button מפני שזה ה-this שאותו שמרנו בקאש.

מדריכי JavaScript למתקדמים

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים