[英]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.在 QML javascript 中,当执行纯 javascript 类构造函数时,“this”在
if (cond) { ... }
下的代码中暂时未定义,但在其他方面仍然有效。
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, ie the class constructor; JS 箭头函数不提供“this”或用它做任何事情,所以符号
this
应该引用它在封闭范围内的定义,即类构造函数; and it is, except in if (c) {...}
conditionals!它是,除了
if (c) {...}
条件!
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(或qmlscene)V6.2.1或v5.15.2生产:
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.这似乎是一个 QML 错误,其中“this”绑定的范围被破坏了。 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:虽然我无法解释为什么会这样,但我找到了一个解决方法,您在进入函数之前显式
.bind(this)
,这会导致if
条件的内容正确评估:
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();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.