הבנת מילת המפתח "זה" של JavaScript

מה עושה ה זֶה מילת מפתח ב-JavaScript מתכוונת? ואיך אתה יכול להשתמש בו באופן מעשי בתוכנית JavaScript שלך? אלו הן כמה מהשאלות הנפוצות שמתחילים ואפילו כמה מפתחי JavaScript מנוסים שואלים לגבי זֶה מילת מפתח.

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

"זה" בתוך ההיקף הגלובלי

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

if(true) {
console.log(this) // returns window object
}
let i = 2
while(i < 10) {
console.log(this) // returns window object till i 9
 i++
}

אם תפעיל את הקוד שלמעלה, תקבל את אובייקט החלון.

"זה" פונקציות פנימיות (שיטות)

בשימוש בתוך פונקציות, זֶה מתייחס לאובייקט שהפונקציה קשורה אליו. היוצא מן הכלל הוא כאשר אתה משתמש זֶה בפונקציה עצמאית, ובמקרה זה היא מחזירה את חַלוֹן לְהִתְנַגֵד. בואו נראה כמה דוגמאות.

בדוגמה הבאה, ה sayName הפונקציה נמצאת בתוך לִי אובייקט (כלומר, זו שיטה). במקרים כאלה, זֶה מתייחס לאובייקט המכיל את הפונקציה.

 
functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley",
 sayName: sayName
}
console.log(me.sayName()) // My name is Kingsley

זֶה האם ה לִי חפץ, כך נאמר זה שם בתוך ה sayName השיטה זהה בדיוק ל אני שם.

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

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

functiontalk() {
returnthis
}
talk() // returns the window object

יִעוּד דבר() זהה להתקשרות window.talk(), וכל מה שנמצא בצד שמאל של הפונקציה יהפוך אוטומטית זֶה.

בהערה צדדית, ה זֶה מילת מפתח בפונקציה מתנהגת אחרת ב מצב קפדני של JavaScript (זה חוזר לא מוגדר). זה גם משהו שכדאי לזכור כשאתה משתמש בספריות ממשק משתמש המשתמשות במצב קפדני (למשל React).

שימוש ב"זה" עם Function.bind()

יתכנו תרחישים שבהם אתה לא יכול פשוט להוסיף את הפונקציה לאובייקט כשיטה (כמו בסעיף האחרון).

אולי החפץ אינו שלך ואתה שולף אותו מספרייה. האובייקט הוא בלתי ניתן לשינוי, אז אתה לא יכול פשוט לשנות אותו. במקרים כאלה, אתה עדיין יכול לבצע את משפט הפונקציה בנפרד מהאובייקט באמצעות ה- Function.bind() שיטה.

בדוגמה הבאה, ה sayName הפונקציה אינה שיטה ב- לִי אובייקט, אבל עדיין קישרת אותו באמצעות ה- לִקְשׁוֹר() פוּנקצִיָה:

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
const meTalk = sayName.bind(me)
meTalk() // My name is Kingsley

לאיזה חפץ שתעברו אליו לִקְשׁוֹר() ישמש כערך של זֶה בקריאת הפונקציה הזו.

לסיכום, אתה יכול להשתמש לִקְשׁוֹר() על כל פונקציה ולעבור בהקשר חדש (אובייקט). והאובייקט הזה יחליף את המשמעות של זֶה בתוך הפונקציה הזו.

שימוש ב"זה" עם Function.call()

מה אם אתה לא רוצה להחזיר פונקציה חדשה לגמרי, אלא פשוט לקרוא לפונקציה לאחר קשירה להקשר שלה? הפתרון לכך הוא שִׂיחָה() שיטה:

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
sayName.call(me) // My name is Kingsley

ה שִׂיחָה() השיטה מבצעת מיד את הפונקציה במקום להחזיר פונקציה אחרת.

אם הפונקציה דורשת פרמטר, אתה יכול להעביר אותו דרך שִׂיחָה() שיטה. בדוגמה הבאה, אתה מעביר את השפה ל- sayName() פונקציה, כך שתוכל להשתמש בה כדי להחזיר הודעות שונות באופן מותנה:

functionsayName(lang) {
if (lang "en") {
return`My name is ${this.name}`
 } elseif (lang "it") {
return`Io sono ${this.name}`
 }
}
const me = {
 name: "Kingsley"
}
sayName.call(me, 'en') // My name is Kingsley
sayName.call(me, 'it') // Io sono Kingsley

כפי שאתה יכול לראות, אתה יכול פשוט להעביר כל פרמטר שאתה רוצה לפונקציה כארגומנט השני ל- שִׂיחָה() שיטה. אתה יכול גם להעביר כמה פרמטרים שאתה רוצה.

ה להגיש מועמדות() השיטה דומה מאוד ל שִׂיחָה() ו לִקְשׁוֹר(). ההבדל היחיד הוא שאתה מעביר ארגומנטים מרובים על ידי הפרדתם בפסיק עם שִׂיחָה(), בעוד שאתה מעביר ארגומנטים מרובים בתוך מערך עם להגיש מועמדות().

לסיכום, bind(), call() ו-apply() כולם מאפשרים לך לקרוא לפונקציות עם אובייקט שונה לחלוטין מבלי שיהיה קשר כלשהו בין השניים (כלומר, הפונקציה אינה שיטה על האובייקט).

"זה" בתוך פונקציות קונסטרוקטור

אם אתה קורא לפונקציה עם a חָדָשׁ מילת מפתח, היא יוצרת א זֶה אובייקט ומחזיר אותו:

functionperson(name){
this.name = name
}
const me = new person("Kingsley")
const her = new person("Sarah")
const him = new person("Jake")
me.name // Kingsley
her.name // Sarah
him.name // Jake

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

"זה" בתוך פונקציות התקשרות חוזרת

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

ה זֶה מילת מפתח מתייחסת להקשר שונה לחלוטין כאשר משתמשים בה בתוך פונקציות התקשרות חוזרת:

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the window object

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

ישנן שתי דרכים לתקן זאת. השיטה הראשונה היא שימוש לִקְשׁוֹר() לאגד את אדם פונקציה לאובייקט החדש שנבנה:

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }.bind(this), 1000)
}
const me = new person("Kingsley") // returns the me object

עם השינוי לעיל, זֶה בהתקשרות חזרה יצביע על אותו הדבר זֶה כפונקציית הבנאי (ה לִי לְהִתְנַגֵד).

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

"זה" בתוך פונקציות החץ

פונקציות החצים שונות מפונקציות רגילות. אתה יכול להפוך את פונקציית ההתקשרות חזרה לפונקציית חץ. עם פונקציות חצים, אתה כבר לא צריך לִקְשׁוֹר() מכיוון שהוא נקשר אוטומטית לאובייקט החדש שנבנה:

functionperson(name){
this.name = name
 setTimeout(() => {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the me object

למידע נוסף על JavaScript

למדת הכל על מילת המפתח "זה" ומה המשמעות שלה בכל ההקשרים השונים ב-JavaScript. אם אתה חדש ב-JavaScript, תפיק תועלת רבה מלמידת כל היסודות של JavaScript וכיצד זה עובד.