В примере кода myOtherFunc печатает унаследованную переменную canvas, но когда один клик на холсте для вызова myFunc, this.canvas печатает как неопределенный. Почему это?
HTML:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="drawCanvas" style="border:1px solid #000000;"></canvas>
<script>
class myClass {
constructor() {
this.canvas = document.getElementById('drawCanvas');
this.ctx = this.canvas.getContext('2d');
this.canvas.addEventListener('click', this.myFunc);
this.myOtherFunc();
}
myFunc(event) {
console.log(this.canvas);
}
myOtherFunc() {
console.log(this.canvas);
}
}
let c = new myClass;
</script>
</body>
</html>
this
сам элемент <canvas>
внутри обработчика события click
прикрепленного к элементу canvas
. this
: <canvas>
не имеет свойства .canvas
заданного в элементе кода в вопросе Вопрос, в результате чего undefined
записывается на console
myFunc(event) {
console.log(this);
}
Также очень полезно:
this.canvas.addEventListener('click', this);
Если вы передадите объект вместо функции, тогда будет вызван handleEvent в этом объекте, и это будет объект. Внутри handleEvent вы можете проверить event.type, чтобы определить тип события. Пример:
class Foo {
constructor(element) {
this.element = element;
element.addEventListener("mousedown", this);
element.addEventListener("mousemove", this);
element.addEventListener("mouseup", this);
}
handleEvent(event) {
// all events come here, so lets redistribute them:
this[event.type](event);
}
mousemove(event) {
}
mousedown(event) {
}
mouseup(event) {
}
}
Это потому, что область обработчика событий - это холст, а не класс. Вам необходимо привязать this
к обработчику событий:
this.canvas.addEventListener('click', this.myFunc.bind(this));
Для получения дополнительной информации о bind
см этой ссылка MDN.