In QML javascript, when executing a pure-javascript class constructor, "this" becomes momentarily undefined in code under if (cond) { ... } but is otherwise valid as is should be.
This problem (seemingly) occurs only if the code is in the body of an anonymous arrow function. JS arrow functions do not provide "this" or do anything with it, so the symbol this should refer to it's definition in the enclosing scope, i.e. the class constructor; and it is, except in if (c) {...} conditionals!
What can possibly explain this?
import QtQuick 2.14
Item {
Component.onCompleted: {
class Bugtest {
constructor() {
this.foo = 123;
((arg) => {
print("BEFORE if: this="+this+", foo="+this.foo);
if (true) {
print("DURING if: this="+this); //undefined here only!!
}
print("AFTER if: this="+this+", foo="+this.foo);
})(42);
print("At constructor exit: this="+this+", foo="+this.foo);
}
};
var xyz = new Bugtest();
}
}
Running the above with qml (or qmlscene) v6.2.1 or v5.15.2 produces:
qml: BEFORE if: this=[object Object], foo=123
qml: DURING if: this=undefined
qml: AFTER if: this=[object Object], foo=123
qml: At constructor exit: this=[object Object], foo=123
This does seem like a QML bug where the scoping of the "this" binding is broken. While I can't explain why this would be, I found a workaround, where you explicitly .bind(this) before entering the function, which causes the contents of the if conditional to evaluate properly:
import QtQuick 2.15
Item {
Component.onCompleted: {
class Bugtest {
constructor() {
this.foo = 123;
((arg) => {
console.log("BEFORE if: this="+this+", foo="+this.foo);
if (true) {
console.log("DURING if: this="+this+", foo="+this.foo); // now works in QML and JSFiddle
}
console.log("AFTER if: this="+this+", foo="+this.foo);
}).bind(this)(42); // added explicit 'this' bind here
console.log("At constructor exit: this="+this+", foo="+this.foo);
}
};
var xyz = new Bugtest();
}
}