Почему переменная класса становится undefined при обращении из метода?

Question

[Disainer]

Есть класс, для вопроса я его упростил
в конструкторе инициализируется переменная класса, как объект с параметрами x,y равными нулю
в конструкторе пишу в консоль - все есть
далее идёт обращение к функции вне конструктора, и переменная уже undefined
не могу понять что идет не так

class TMyClass{
	MyVariable;
	
	constructor(){
		this.MyVariable = {x: 0, y: 0};
		console.log("MyVariable: " + this.MyVariable); //[object Object]
	}
	
	MyFunc(e){
		console.log("MyVariable: " + this.MyVariable); //тут undefined 
	}
}

export { TMyClass };

Comments

[VoidVolker]

Код, который вызывает проблему? Ибо если все правильно делать - то все работает как надо:

>> let r = new TMyClass()
MyVariable:  Object { x: 0, y: 0 }
<- undefined
>> r.MyFunc()
MyVariable:  Object { x: 0, y: 0 }
<- undefined

Answer 1

[Михаил Р.]

Стрелочная функция не имеет своего this, соответственно возьмет его из скоупа выше:

MyFunc = (e) => {
  console.log("MyVariable: " + this.MyVariable); // oh yes
}

Answer 2

[Сергей delphinpro]

судя по переменной e могу предположить, что это обработчик события.

import { TMyClass } from './TMyClass';

const obj = new TMyClass;

addEventListener('click', obj.MyFunc.bind(obj))

или 

addEventListener('click', e => obj.MyFunc(e))

Answer 3

[Алексей Уколов]

Классическая потеря контекста. Можно вылечить так:

constructor(){
  this.MyVariable = {x: 0, y: 0};

  this.MyFunc = this.MyFunc.bind(this);
}

Возможно, уже появился какой-то дополнительный синтаксический сахар, который позволяет объявлять метод сразу с прибитым контекстом (помимо arrow function).