מילת המפתח this ב-JavaScript: חוקי Binding ומלכודות נפוצות

this נקבע בזמן הקריאה

רוב הבלבול סביב this נובע מהנחה שגויה אחת: ש-this תלוי במקום שבו פונקציה מוגדרת. הוא לא. this תלוי באופן שבו הפונקציה נקראת.

הנה אותה פונקציה שנקראת בשתי דרכים:

function whoAmI() {
    return this;
}

const user = { name: "Ada", whoAmI };

console.log(user.whoAmI() === user);   // true
console.log(whoAmI());                  // undefined (in strict mode)

אותה פונקציה, this שונה. בקריאה הראשונה יש user משמאל לנקודה, ולכן this הוא user. בקריאה השנייה אין כלום משמאל, ולכן this הוא undefined. הפונקציה עצמה לא השתנתה, מקום הקריאה השתנה.

זכרו את הרעיון הזה: כדי להבין מה זה this, הסתכלו על הקריאה, לא על ההגדרה.

ארבעת חוקי ה-Binding

יש ארבע דרכים שבהן this נקבע. כמעט כל שאלה על this שתהיה לכם אי פעם נפתרת כשמבינים איזה מהם חל.

1. קריאה למתודה: obj.fn()

כשפונקציה נקראת כמאפיין של אובייקט, this הוא אותו אובייקט:

const counter = {
    count: 0,
    increment() {
        this.count += 1;
        return this.count;
    },
};

console.log(counter.increment());   // 1
console.log(counter.increment());   // 2

מה שנמצא משמאל לנקודה הופך ל-this. פשוט כמו שזה נשמע.

2. קריאה רגילה: fn()

כשקוראים לפונקציה בלי אובייקט לפניה, this הוא undefined ב-strict mode (שמודולים ומחלקות מפעילים אוטומטית) או האובייקט הגלובלי במצב הרגיל:

"use strict";

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

show();   // undefined

מכאן מגיעות שגיאות ה-"this is undefined". שליפה של מתודה מהאובייקט שלה הופכת קריאה למתודה לקריאה רגילה:

"use strict";

const counter = {
    count: 0,
    increment() { this.count += 1; },
};

const fn = counter.increment;
// fn();   // TypeError: Cannot read properties of undefined

אין counter. לפני הקריאה, אין binding. הפונקציה לא זוכרת מאיזה אובייקט היא הגיעה.

3. Binding מפורש: .call(), .apply(), .bind()

אפשר לכפות על this כל ערך שרוצים:

function greet(greeting) {
    return `${greeting}, ${this.name}`;
}

const ada = { name: "Ada" };

console.log(greet.call(ada, "Hello"));       // Hello, Ada
console.log(greet.apply(ada, ["Hi"]));       // Hi, Ada

const greetAda = greet.bind(ada);
console.log(greetAda("Hey"));                // Hey, Ada

.call ו-.apply קוראים לפונקציה מיד; ההבדל ביניהם הוא רק באופן שבו מועברים הארגומנטים. .bind מחזיר פונקציה חדשה שבה this נעול לתמיד, מה ששימושי עבור callbacks.

4. קריאה עם new: new Fn()

קריאה לפונקציה עם new יוצרת אובייקט חדש וקושרת אותו ל-this:

function User(name) {
    this.name = name;
}

const ada = new User("Ada");
console.log(ada.name);   // Ada

מחלקות משתמשות במנגנון הזה מאחורי הקלעים. נפגוש אותן בפרק מאוחר יותר.

ל-Arrow Functions אין this משלהן

Arrow functions שוברות את החוקים שלמעלה, בכוונה. הן לא קושרות this בכלל: הן יורשות אותו מה-scope שמסביבן, קפוא ברגע שה-arrow מוגדרת:

const user = {
    name: "Ada",
    regular: function () { return this; },
    arrow: () => this,
};

console.log(user.regular() === user);   // true
console.log(user.arrow());              // undefined (or window/globalThis)

ה-arrow ברמה העליונה של מודול לוכדת את ה-this של המודול, שהוא undefined. למרות שהיא נקראת בצורה user.arrow(), ה-arrow מסרבת לקשור מחדש.

זה נשמע כמו באג, אבל זו כל המטרה. Arrow functions מצטיינות בתוך מתודות, שבהן רוצים לשמור על ה-this החיצוני:

const timer = {
    seconds: 0,
    start() {
        setInterval(() => {
            this.seconds += 1;
            console.log(this.seconds);
        }, 1000);
    },
};

// timer.start();   // logs 1, 2, 3, ...

ה-arrow בתוך setInterval יורשת את this מ-start, שנקראה בצורה timer.start(). לכן this.seconds עובד. function רגילה במקום הזה הייתה מקבלת this משלה (מה ש-setInterval מעביר) ונשברת.

כלל אצבע: השתמשו ב-arrow functions עבור callbacks בתוך מתודות. השתמשו בפונקציות רגילות עבור המתודות עצמן.

מלכודת ה-Callback הקלאסית

זו הדרך הנפוצה ביותר שבה this משתבש. מעבירים מתודה כ-callback, והיא מאבדת את ה-binding שלה:

class Counter {
    count = 0;
    increment() {
        this.count += 1;
        console.log(this.count);
    }
}

const c = new Counter();
c.increment();   // 1

// setTimeout(c.increment, 100);   // TypeError: this is undefined

setTimeout קורא לפונקציה כקריאה רגילה, לא בצורה c.increment(). שלוש דרכים לתקן את זה:

class Counter {
    count = 0;
    increment() {
        this.count += 1;
        console.log(this.count);
    }
}

const c = new Counter();

// 1. Arrow wrapper - call it as a method inside the arrow
setTimeout(() => c.increment(), 0);

// 2. .bind - lock this to c
setTimeout(c.increment.bind(c), 0);

// 3. Class field with arrow - auto-bound per instance
class Counter2 {
    count = 0;
    increment = () => {
        this.count += 1;
        console.log(this.count);
    };
}
setTimeout(new Counter2().increment, 0);

שלושתן עובדות. עטיפת ה-arrow היא בדרך כלל הברורה ביותר.

this ברמה העליונה

ה-this ברמה העליונה תלוי במקום שבו הקוד שלכם רץ:

• סקריפט בדפדפן (לא מודול): this הוא window.
• מודול ES (כולל רוב הקוד המודרני שעובר bundling): this הוא undefined.
• מודול CommonJS של Node.js: this הוא module.exports.

להפניה אמינה לאובייקט הגלובלי בכל הסביבות, השתמשו ב-globalThis:

console.log(typeof globalThis);   // object
globalThis.appVersion = "1.0.0";
console.log(globalThis.appVersion);

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

עץ החלטות מהיר

כשאתם רואים this ולא בטוחים מה הוא יהיה, עברו על הרשימה הזו:

1. האם הפונקציה היא arrow function? אז this הוא מה שהיה ב-scope העוטף. התעלמו לגמרי ממקום הקריאה.
2. האם היא נקראה עם new? אז this הוא האובייקט החדש.
3. האם היא נקראה עם .call, .apply או כפונקציה קשורה (bound)? אז this הוא מה שהועבר.
4. האם היא נקראה בצורה obj.method()? אז this הוא obj.
5. האם היא נקראה כ-fn() רגילה? אז this הוא undefined ב-strict mode.

הסולם הזה, בסדר הזה, מכריע בכל מקרה.

הבא בתור: Higher-Order Functions

עכשיו ש-this כבר לא תעלומה, אתם מוכנים לדפוס שהופך את JavaScript לכל כך אקספרסיבית: העברת פונקציות כערכים. בהמשך נסתכל על higher-order functions, פונקציות שמקבלות או מחזירות פונקציות אחרות, ועל האופן שבו הן מניעות מתודות של מערכים, event handlers ואת רוב קוד ה-JavaScript בעולם האמיתי.