QML 中 JavaScript 函数范围的规则在哪里定义？

Question

我正在尝试确定 QML 中函数范围的细节。文档中的示例似乎经常不正确（或不完整）。我将从JavaScript Host Environment doc page 中举一个非常典型的例子。我正在使用 Qt 5.3。

Item {
   width: 200; height: 100
   function mouseAreaClicked(area) {
       console.log("Clicked in area at: " + area.x + ", " + area.y);
   }
   // This will not work because this is undefined
   MouseArea {
       height: 50; width: 200
       onClicked: mouseAreaClicked(this)
   }
   // This will pass area2 to the function
   MouseArea {
       id: area2
       y: 50; height: 50; width: 200
       onClicked: mouseAreaClicked(area2)
   }
}

如果我把它粘贴到根 ApplicationWindow 对象内的一个新的空项目中，它就不起作用。我见过很多这样的例子，它们的行为都是一样的。对函数 mouseAreaClicked() 的调用会生成一个引用错误。我可以将函数向上移动，使其直接位于根对象内，或者我可以分配一个 id 并通过 id 调用该函数。

这是应该如何工作的？只有当它们是根对象的一部分时，函数才可用？这是最近发生的变化吗？它与 ApplicationWindow 对象有关吗？我在文档中找不到任何提及。这个例子也有点有趣，因为正在讨论的主题：this 指针的行为与描述的不同。第一个 MouseArea 调用的代码与第二个 MouseArea 调用的代码一样工作，所以我也不知道该怎么做。

任何见解都值得赞赏。

Answer 1

我认为关键在于“处理单元”的定义。可能（我稍后会检查）当您粘贴一些打算驻留在 file.qml 中的代码时 - 然后打算（重新）定义一个有点自治的组件 - 您更改嵌套范围，并且 - 我从您报告的示例中推断，和我的经验 - 在深度嵌套的级别中，只有根的属性是不合格的。到目前为止，我已经测试了明显的“明确限定”

...
  MouseArea {
       id: area2
       y: 50; height: 50; width: 200
       onClicked: parent.mouseAreaClicked(area2)
   }
...

按预期工作。也许他们应该考虑您的问题，并更正示例代码，或者解释为什么您不应该复制/粘贴该 sn-p。总的来说，我觉得你的问题是合理的。

FWIW，我有代码 - 在派生的 QML 组件中 - 调用我放置在应用程序根目录中的实用程序。这是我的实用程序

-- 主文件

ApplicationWindow {
    ...
    // utility to assign multiple members by name
    function assign(target, source) {
        for (var k in source)
            target[k] = source[k]
    }
    ...
}

-- 组件文件

MouseArea {

    ...
    anchors.fill: parent
    drag.target: dr

    onClicked: {
        //console.log("onClicked")
        var i = {x:mouse.x, y:mouse.y, visible:true, width:10, height:10}
        assign(dr, i)
        assign(area, i)
    }
    ...
 }