תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

מה זה? 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 כוכבים

 

 

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

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

שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.

המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

מתי הוקמה המדינה?

 

תמונת המגיב

מפתח בתאריך: 14.10.2018

ברור מאוד!
תודה

תמונת המגיב

היי בתאריך: 30.03.2020

תודה על ההסבר

תמונת המגיב

אלברט בתאריך: 09.09.2021

תודה רבה מוסבר מעולה !!
זיהיתי שגיאה ב ( 6. apply עובד בדומה ל-call ) שורה אחרונה , במקום:
whatsThis.call(obj, array);
צריך להיות :
whatsThis.apply(obj, array);

תמונת המגיב

מישהו בתאריך: 20.01.2022

תודה רבה על ההסבר הנפלא!! צריך רק להוסיף שאם רוצים לראות את הערך בקונסולה צריך להעביר את הערך של הפונקציה למשתנה לאחר הוספת ה-bind וה-call וה-aplly ואת המשתנה להציג בקונסולה אחרת זה לא עובד