Javascript 访问父变量的正确方法

Question

Qt 在https://doc.qt.io/qt-5/qtquick-performance.Z5E056C500A1C70D82286中指定以下代码 accumulatedValue 变量作为“root.accumulatedValue”访问，只是“accumulatedValue”。 只是想了解在这种情况下访问父变量的正确方法是什么。

// good.qml
import QtQuick 2.3

Item {
    id: root
    width: 200
    height: 200
    property int accumulatedValue: 0

    Text {
        anchors.fill: parent
        text: root.accumulatedValue.toString()
        onTextChanged: console.log("text binding re-evaluated")
    }

    Component.onCompleted: {
        var someData = [ 1, 2, 3, 4, 5, 20 ];
        var temp = accumulatedValue;
        for (var i = 0; i < someData.length; ++i) {
            temp = temp + someData[i];
        }
        accumulatedValue = temp;
    }
}

Answer 1

当从与它所属的 object 相同的scope中访问属性时，不需要使用id来限定访问。 当从不同的 scope 访问该属性时，您应该使用该属性所属的 object 的id对其进行限定。

使用qmllint举一些例子：

import QtQuick 2.3

Item {
    id: root
    width: 200
    height: 200
    property int accumulatedValue: 0

    Text {
        /*
            Warning: unqualified access at /tmp/good.qml:20:21

                    objectName: accumulatedValue
                                ^^^^^^^^^^^^^^^^
            Note: accumulatedValue is a member of the root element
                  You can qualify the access with its id to avoid this warning:

                    objectName: root.accumulatedValue
        */
        objectName: accumulatedValue
        anchors.fill: parent
        // Fine; qualified with id.
        text: root.accumulatedValue

        Component.onCompleted: {
            /*
                Warning: unqualified access at /tmp/good.qml:36:19

                            print(accumulatedValue)
                                  ^^^^^^^^^^^^^^^^
                Note: accumulatedValue is a member of the root element
                      You can qualify the access with its id to avoid this warning:

                            print(root.accumulatedValue)
            */
            print(accumulatedValue)
        }
    }

    Component.onCompleted: {
        var someData = [ 1, 2, 3, 4, 5, 20 ];
        // Fine; in same scope.
        var temp = accumulatedValue;
        for (var i = 0; i < someData.length; ++i) {
            temp = temp + someData[i];
        }
        accumulatedValue = temp;
    }
}

不合格的访问成本很高，因为它们需要引擎搜索各种范围才能找到属性。

另一个原因是可读性，在上面链接的 scope 文档中进行了解释：

动态范围非常强大，但必须谨慎使用以防止 QML 代码的行为变得难以预测。 一般来说，它应该只在两个组件已经以另一种方式紧密耦合的情况下使用。 在构建可重用组件时，最好使用属性接口 [...]