מדוע this של אוביקט הבן לא מחזיר מאפיין של אוביקט האב

[אהרן]

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

מדוע

myClass.o.get3()

לא מחזיר את myClass.a הלא אחד התכונות פונקצית החץ שהוא תמיד מחפש באביקט הראשון?!

function Fun1 () {
	this.a=9;
	this.get1 = _=> this.a;
	this.get2 = _=> this.b;
}

function Fun2 () {
	this.b=9
	this.get3 = _=> this.a;
	this.get4 = _=> this.b;
}

var myClass = new Fun1()
myClass.o = new Fun2();

console.log(myClass.get1(), myClass.get2(), myClass.o.get3(), myClass.o.get4() )
//9 undefined undefined 9

[yossiz]

@אהרן אמר במדוע this של אוביקט הבן לא מחזיר מאפיין של אוביקט האב:

הלא אחד התכונות פונקצית החץ שהוא תמיד מחפש באביקט הראשון?!

ברשות בעה"ב מרנן ורבנן וכו' אנסה לענות.

הכלל הוא ש(this של פונקציית חץ) === (this של יוצר הפונקציה).
פונקציית חץ אין לו this משל עצמו.
ולכן, במקרה של ()get3 שיוצר הפונקציה הוא Fun2, לכן ה-this שלו מאוגד באופן קבוע ל-this של Fun2.

אם היית כותב כך:

Fun1 =  {
	a:9,
	get1: function(){return this.a},
	get2: function(){return this.b}
}

Fun2 = {
	b:9,
	get3: _=> this.a,
	get4: _=> this.b
}

var myClass = Fun1;
myClass.o = Fun2;

console.log(myClass.get1(), myClass.get2(), myClass.o.get3(), myClass.o.get4() )
// 9 undefined undefined undefined

מכיון שעכשיו אתה מייצר את פונקציית החץ לא בתוך פונקציה אלא ב-scope הגלובלי, אז ה-this שלו הוא ה-this הגלובלי שהוא Window (בדפדפן), ואין לו מאפיין בשם a או b.

ובקיצור, ה-this של פונקציית חץ לא קשור בכלל ל-this של אובייקט האבא אלא ל-this של יוצר הפונקציה.

מקורות

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#Arrow_functions

הערות

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

[אהרן]

האם יש דרך להתייחס עם מתודות של אוביקט הבן למאפיינים של אוביקט האב?

[יוסף בן שמעון]

לא בטוח שהבנתי את הצורך שלך, אבל לכאורה לזה בדיוק נכתבה פרשת ירושה, משהו כזה:

class Fun1{
	a=9;
	get1 = _=> this.a;
	get2 = _=> this.b;
}

class Fun2 extends Fun1 {
	b=9
	get3 = _=> this.a;
	get4 = _=> this.b;
}

var myClass = new Fun2()

console.log(myClass.get1(), myClass.get2(), myClass.get3(), myClass.get4() )

[יוסף בן שמעון]

function Fun1 () {
	this.o = new Fun2()
	this.o.parent = this;

	this.a=9;
	this.get1 = _=> this.a;
	this.get2 = _=> this.b;
}

function Fun2 () {
	this.b=9
	this.get3 = _=> this.parent.a;
	this.get4 = _=> this.b;
}
var myClass = new Fun1()

console.log(myClass.get1(), myClass.get2(), myClass.o.get3(), myClass.o.get4() )

[yossiz]

לשם השלמת נושא "this בתוך פונקציית חץ" -

לְמַה ולָמָה המציאו פונקצייות חץ

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

ב. אז מה כן? פונקציית חץ הוא טוב עבור callback. למה? כי בפונקצייה רגילה כאשר מעבירים מתודה של אובייקט לתוך callback ורוצים לפעול על האובייקט בעל המתודה, א"א להתייחס לאובייקט האבא ע"י מילת המפתח this, כי this מאוגד לאובייקט האבא רק כאשר קורים את הפונקציה מתוך האבא אובייקט.מתודה() אבל אם נאמר var מתודה2 = אבא.פונקציה; מתודה2(); אז ה-this של הפונקצייה מאוגד ל-window (בדפדפן). והרי זה מה שקורה כאשר ה-callback נקרא.
אז פעם בימי החושך היו צריכים לאגד בפירוש כל פונקצייה שמעבירים לתוך callback לאובייקט. אבל היום אפשר לכתוב פונקציית חץ ואז ה-this מאוגד אוטומטי ל-this של האובייקט שהפונקציה שייך לו.

דוגמא:

function Obj(id) {
    this.id = id;
    this.logme = function() {console.log(`id:${this.id}`)}
}
myobj = new Obj(22);
myobj.logme(); //"id:22"
setTimeout(myobj.logme, 1000); //"id:undefined"

//פעם היו עושים כך:
setTimeout(myobj.logme.bind(myobj), 1000);

//או שהיו מגדירים את האובייקט כך:
function Obj(id) {
    self = this
    this.id = id;
    this.logme = function() {console.log(`id:${self.id}`)}
}

//והיום אפשר כך:
function Obj(id) {
    this.id = id;
    this.logme = () => console.log(`id:${this.id}`);
}

[dovid]

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