OOP JS: function incrementing date repeatedly, and I don't know why?

问题

Following on from my previous thread, I went on to design the following Objects.

/* --- LEAP Namespace --- */
    var LEAP = {};

/* --- LEAP.Schedule Object --- */
    LEAP.Schedule = function(){//init
      this.weeks = [];
      this.calculateWeeks();
    };

    LEAP.Schedule.prototype.pad = function (n) {
        return n>9 ? n : "0"+n;
    };

    LEAP.Schedule.prototype.calculateWeeks = function(){
        this.date = new Date ( 2011, 8, 5 ); // First week of new school year
        this.num = 36; // Calendar number of this week
        this.weeks.push(new LEAP.Schedule.week(this.date, this.num));

        for (var i = 1; i < 51; i++) {
            var week = i * 7;
            var updated_date = new Date ();
            updated_date.setDate(this.date.getDate() + week);

            if (this.num > 51) {
                this.num = 0;
            }
            this.num++;

            this.weeks.push(new LEAP.Schedule.week(updated_date, this.num));
        }
    };

    LEAP.Schedule.prototype.getWeeks = function(){
        return this.weeks;
    };


/* --- LEAP.Schedule.week Object --- */
    LEAP.Schedule.week = function(n_date, n_week){
        this.week = n_week;
        this.date = n_date;

        this.year = this.date.getFullYear();
        var JSMonth = this.date.getMonth();
        JSMonth += 1;
        this.month = JSMonth;
        this.day = this.date.getDate();
    };

    LEAP.Schedule.week.prototype.getJSDate = function(){
        return this.date;
    };

    LEAP.Schedule.week.prototype.getStartDate = function(){
        return this.year + "-" + LEAP.Schedule.pad(this.month) + "-" + LEAP.Schedule.pad(this.day);
    };

    LEAP.Schedule.week.prototype.getEndDate = function(){
        var EndOfWeek = this.date;
        EndOfWeek.setDate(this.date.getDate() + 6);

        var year = EndOfWeek.getFullYear();
        var month = LEAP.Schedule.pad(EndOfWeek.getMonth() + 1);
        var day = LEAP.Schedule.pad(EndOfWeek.getDate());

        return year + "-" + month + "-" + day;
    };

    LEAP.Schedule.week.prototype.getLabel = function(){
        return "Week " + this.week + ": " + this.day + (this.day==1||this.day==21||this.day==31?"st":this.day==2||this.day==22?"nd":this.day==3||this.day==23?"rd":"th") + " " + ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][this.month-1] + " " + this.year;
    };

I'm now using a <SELECT> box to filter some other data, which works successfully, apart from the fact that every time the $('#filter').change() event is triggered, the dates are being incremented.

    WeeklyUpdate.init = function() {
        UWA.Data.getJson(WeeklyUpdate.URL + "?cmd=getPointTotals", WeeklyUpdate.getTotalPoints);

        var Scheduleobject = new LEAP.Schedule();
        var weeks = Scheduleobject.getWeeks();
        WeeklyUpdate.displayWeekFilter(weeks);
    }

    WeeklyUpdate.displayWeekFilter = function(weeks) {
        var WeekFilterDisplayHTML = '<select id="filter"><option>Click here</option><option value="all">- All, to date</option>';
        var now = new Date();

        for (var i = 0; i < weeks.length; i++) {
            if (weeks[i].getJSDate() < now) {
                var label = weeks[i].getLabel();
                WeekFilterDisplayHTML += '<option value="' + i + '">' + label + '</option>';
            }
        }

        WeekFilterDisplayHTML += '</select>';
        $('div#filter').html(WeekFilterDisplayHTML);

        //WeeklyUpdate.filterPointTotalsByStaff( $(this).val() )
        $("select#filter").change( function() { WeeklyUpdate.filterPointTotalsByStaff( weeks, $(this).val() ) } );
    }

    WeeklyUpdate.filterPointTotalsByStaff = function(weeks, val) {
        if (val >= 0 && val != "all") {
            var StartDate = weeks[val].getStartDate();
            var EndDate = weeks[val].getEndDate();

If I add alert(StartDate + ' // ' + EndDate); after those variables, I can see that the EndDate is being incremented every time, rather than being incremented once and then consistently returning the correct EndDate regardless of how many times it is selected from the SELECT box. The StartDate on the other hand works correctly every time.

What should happen is that this.date (which returns a JS date Object for the week being requested) should be the start of the week, then the getEndDate() function should increment that date by 6 days and return the correct date in a MySQL-compatible format. This shouldn't increment every time its <OPTION> is selected from the SELECT box; it should always return the same date.

I'm guessing that it's something to do with the way I've used EndOfWeek = this.date;, but I don't understand why or how.

Many thanks again.

回答1:

Probably doesn't matter here but is bad form anyway:

      for (i = 1; i < 51; i++) {

The variable i should be declared.

In the statement (my wrapping):

$("select#filter").change( function() { 
   WeeklyUpdate.filterPointTotalsByStaff( weeks, $(this).val() )
});

You do not show how weeks is initialised or assigned a value. There is a weeks property of LEAP.Schedule instances, but above it is used in the context of a global variable.

来源：https://stackoverflow.com/questions/7416414/oop-js-function-incrementing-date-repeatedly-and-i-dont-know-why

标签

javascript

oop

object