javascript - 如何在 JavaScript 对象 {} 中不使用 `this` 呢？

Question

在 Norway this year Doug Crawford 宣布他不再在 JavaScript 中使用 this (或者他指的是 ES6？)。真诚地，如果不在这里使用this怎么会:

var indexViewModel = {

    currentIndex: ko.observable(0),
    currentPage: ko.observable(1),
    displayItems: ko.observableArray(),

    indexSegmentsForPeople: [
        { id: "poetryinxhtml", text: "Poetry in XHTML5" },
        { id: "poetryinpdf", text: "Poetry in PDF" },
        { id: "poetryinstreams", text: "Poetry in Streams" },
        { id: "digitizedart", text: "Digitized Art" }
    ],
    indexSegmentsForTime: [
        { id: "prose", text: "Prose" },
        { id: "interviewsanddocumentary", text: "Interviews/Documentary" },
        { id: "therasxcontext", text: "the rasx() context" }
    ],
    indexVisitorLinks: [
        { url: "./rasx01.html", title: "about the kinté space" },
        { url: "./kfaqs.html", title: "kinté FAQs" },
        { url: "./khits.html", title: "kinté hits" },
        { url: "./rasx00.html", title: "the kinté space oddity" }
    ],
    items: [],
    itemsCount: ko.observable(0),
    itemsPerPage: 9,
    pageCount: ko.observable(0),

    getCurrentIndex: function () {
        return ((this.currentPage() - 1) * this.itemsPerPage);
    },
    getJSON: function (id) {
        var url = this.getIndexJsonUrl(id);
        var that = this;
        return $.getJSON(url).then(function (data) {
            that.setItems(data);
        });
    },
    getJSONforVisitors: function () {
        var that = this;
        return $.getJSON('./data/VisitorThumbs.json').then(function (data) {
            that.setItemsForVisitors(data);
        });
    },
    getIndexJsonUrl: function (id) {
        return './data/index-' + id + '.json';
    },
    getIsNewValue: function (pubDate) {
        var now = new Date();
        var test1 = ((now.getMonth() - pubDate.getMonth()) <= 2);
        var test2 = (pubDate.getFullYear() === now.getFullYear());
        return (test1 && test2);
    },
    getSlice: function () {
        return this.items.slice(this.currentIndex(),
                (this.currentIndex() + this.itemsPerPage));
    },
    isNextPageEnabled: ko.observable(true),
    isPreviousPageEnabled: ko.observable(false),
    setDisplayItems: function () {
        var that = this;
        var slice = this.getSlice();
        this.displayItems.remove(function (item) { return item; });
        _(slice).each(function (item) { that.displayItems.push(item); });
    },
    setEnabled: function () {
        this.isNextPageEnabled(this.currentPage() < this.pageCount());
        this.isPreviousPageEnabled(this.currentPage() > 1);
    },
    setItems: function (data) {
        var that = this;
        this.items = _(data.ChildDocuments)
            .sortBy(function (d) { return $.rx.dateTime.getJsonDate(d.CreateDate); }).reverse();

        _(this.items).each(function (item) {
            //Add .isNew property:
            var pubDate = $.rx.dateTime.getJsonDate(item.CreateDate);
            item.isNew = that.getIsNewValue(pubDate);
        });

        this.currentIndex(0);
        this.currentPage(1);
        this.itemsCount(this.items.length);
        this.pageCount(Math.ceil(this.itemsCount() / this.itemsPerPage));
        this.setDisplayItems();
        this.setEnabled();
    },
    setItemsForVisitors: function (data) {
        this.items = data.ChildDocuments;

        this.currentIndex(0);
        this.currentPage(1);
        this.itemsCount(this.items.length);
        this.pageCount(Math.ceil(this.itemsCount() / this.itemsPerPage));
        this.setDisplayItems();
        this.setEnabled();
    },
    setNextPage: function () {
        this.currentPage(this.currentPage() + 1);
        this.setEnabled();
        if (this.currentPage() > this.pageCount()) { this.currentPage(this.pageCount()); }
        this.currentIndex(this.getCurrentIndex());
        this.setDisplayItems();
    },
    setNextPageClickGate: function () {
        if (this.isNextPageEnabled()) { this.setNextPage(); } else { return false; }
    },
    setPreviousPage: function () {
        this.currentPage(this.currentPage() - 1);
        this.setEnabled();
        if (this.currentPage() < 1) { this.currentPage(1); }
        this.currentIndex(this.getCurrentIndex());
        this.setDisplayItems();
    },
    setPreviousPageClickGate: function () {
        if (this.isPreviousPageEnabled()) { this.setPreviousPage(); } else { return false; }
    },
    triggerAfterAdd: function (item, iterator) {
        $(window.document).trigger('afterAdd',
            ['IndexFlowTemplate', item, iterator]);
    }
};

？？？

Answer 1

你的代码片段对我来说看起来不太惯用。这就像 Java 代码非常简单地转换为 Javascript。在 JS 中，通常的“代码单元”(代码+数据)是一个闭包，而不是一个对象:

var indexViewModel = (function() {

    var
        currentIndex = ko.observable(0),
        currentPage = ko.observable(1),
        etc...

    function getCurrentIndex() {
        return (currentPage() - 1) * itemsPerPage;
    };

    function getJSON(id) {
        var url = getIndexJsonUrl(id);
        return $.getJSON(url).then(function (data) {
            setItems(data);
        });
    };

    etc....

    return {
        // whatever needs to be public
    };

})();

基本上，所有“对象成员”都变成了局部变量，而“私有(private)方法”=局部函数。正如您所看到的，根本不需要 this (更不用说 that=this)。代码更加简单和清晰。