CODEWITHSUNDEEP
javascriptqtqml
jimav
jimav

Reputation: 840

QML javascript: "this" becomes undefined in class constructor under if(){...} if in arrow function

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

Upvotes: 1

Views: 352

Answers (1)

fallerd
fallerd

Reputation: 1738

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();
  }
}

Upvotes: 1

Related Questions