javascript - 尝试访问 JavaScript 对象属性，得到不同的结果

Question

这是有问题的伪代码:https://jsfiddle.net/yzps2gef/40/

我试图理解为什么我无法在一种情况下直接访问对象的属性(请参阅评论中的问题 #1)，但在另一种情况下可以(请参阅评论中的问题 #2)。我看不出两者之间的区别。谢谢!

这是 fiddle 代码:

window.DataStore = function () {
    var url = new Url(),
        filters = new Filters(),
        orderBy,
        orderByDir,
        setOrderBy = function (x, y) {
            orderBy = x;
            orderByDir = y;
        },
        getOrderBy = function () {
            return orderBy;
        },
        getOrderByDir = function () {
            return orderByDir;
        };

    return {
        url: url,
        filters: filters,
        orderBy: orderBy,
        orderByDir: orderByDir,
        setOrderBy: setOrderBy,
        getOrderBy: getOrderBy,
        getOrderByDir: getOrderByDir
    };
};

window.Url = function () {
    var get = function (ds) {
        var url = 'xyz.php';

        console.log(ds);

        // ISSUE #1: These do not work.  It results in: xyz.php?orderby=undefined&orderbydir=undefined.
        // Why can't I access them directly like I do below with the dataStore.filters.someFilterOption?
        url = url + '?orderby=' + ds.orderBy;
        url = url + '&orderbydir=' + ds.orderByDir;

        // These work when I use the "get" functions.
        // url = url + '?orderby=' + ds.getOrderBy();
        // url = url + '&orderbydir=' + ds.getOrderByDir();

        return url;
    }

    return {
        get: get
    };
};

window.Filters = function () {
    var someFilterOption = 0;

    return {
        someFilterOption: someFilterOption
    };
};

window.Grid = function () {
    var dataStore = new DataStore(),
        doSearch = function () {
            console.log(dataStore.url.get(dataStore));
        },
        render = function () {
            doSearch();
            // ISSUE #2: Why can I access this one directly but not the order bys?
            if (dataStore.filters.someFilterOption) {
                console.log('Why was I able to read this one (dataStore.filters.someFilterOption) directly and not have to have a getSomeFilterOption() function to read it?  But when it comes to the orderBy and orderByDir above I cannot read them directly.');
            }
        }

    return {
        dataStore: dataStore,
        render: render
    };
};

window.MyReUsableGrid = function () {
    var grid = new Grid(),
        showSomeFilterOption = function () {
            grid.dataStore.filters.someFilterOption = 1;
        },
        render = function () {
            grid.render();
        };

    grid.dataStore.setOrderBy(4, 'asc');

    return {
        showSomeFilterOption: showSomeFilterOption,
        render: render
    };
};

// The Screen
var myGridScreen = new MyReUsableGrid();
myGridScreen.showSomeFilterOption();
myGridScreen.render();

Answer 1

因为当您的对象从函数返回时，此行将被评估:

 orderBy: orderBy,

由于变量 orderBy 尚未设置，但它实际上是:

 orderBy: undefined

现在，您可以调用 setOrderBy 并将内部变量 orderBy 设置为可以通过 getter 公开的值，但这不会反射(reflect)到对象属性中。

<小时/>

在我看来，整个事情应该进行重组，以便这些方法能够适应它们的上下文:

 window.DataStore = () => ({
    url: new Url(),
    filters: new Filters(),
    applyOrder(order, dir) {
        this.orderBy = order;
        this.orderByDir = dir;
    },
 });

这样你就根本不需要 setter/getter 了。