Question

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

我试图理解为什么我不能在一种情况下直接访问对象的属性（请参阅注释中的问题1），而在另一种情况下（可以在注释中，请参见问题2）可以访问。我看不到两者之间的区别。谢谢！

这是小提琴代码：

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公开的值，但不会反映到objects属性。

IMO应当对整个事物进行重组，以使方法与它们的上下文配合工作：

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

那样，您根本不需要吸气剂。

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

1 个答案: