覆盖 Javascript 日期构造函数？

Question

I am developing a browser application that is sensitive to the current date.

Throughout my application's code, I call new Date and perform calculations based on the current time and render the view accordingly.

In order to test my application for different potential calendar days, I would have to constantly change my system clock to the past or future, which is an annoyance and probably not healthy for my computer.

So purely for testing purposes (I would never use this code in production), I decided to override the built-in Date constructor by doing this in the console:

// create a date object for this Friday:
var d = new Date(2012, 0, 20)
//override Date constructor so all newly constructed dates return this Friday
Date = function(){return d}

With this assumption in mind, I tried this and got strange results:

var now = new Date
Sat Apr 07 2012 00:00:00 GMT-0400 (EDT)

now = new Date
Tue Jul 10 2012 00:00:00 GMT-0400 (EDT)

now = new Date
Wed Jul 09 2014 00:00:00 GMT-0400 (EDT)

now = new Date
Wed Jun 07 2023 00:00:00 GMT-0400 (EDT)

...and so on....

My question is, what exactly is going on here?

If I overrode the constructor to return a static date, why does it give unrelated and constantly incrementing dates?

Also, is there an effective way I can override the Date constructor to return a static date in the future without having to go through all date instantiation calls in my code and modifying the output?

Thanks in advance.

EDIT:

I tried my code in a fresh window and it worked as expected.

It seems the culprit was the jQuery UI datepicker plugin which was calling its "refresh" method. When I disable its call, the date overriding works normally, but as soon as I use the datepicker, the strange behavior above occurs.

No idea why this popular plugin would somehow affect something global like this. If anyone has any ideas, let me know.

Sorry for not figuring out the true culprit earlier.

Answer 1

I also faced this problem and ended up writing a module for that. Perhaps it's useful for somebody:

Github: https://github.com/schickling/timemachine

timemachine.config({
  dateString: 'December 25, 1991 13:12:59'
});

console.log(new Date()); // December 25, 1991 13:12:59

Answer 2

I tested your code:

// create a date object for this Friday:
var d = new Date(2012, 0, 20);
//override Date constructor so all newly constructed dates return this Friday
Date = function(){return d;};

var now = new Date()
console.log(now);

now = new Date()
console.log(now);

now = new Date()
console.log(now);

now = new Date()
console.log(now);

And the result ???? Why so different?

Date {Fri Jan 20 2012 00:00:00 GMT+0700 (SE Asia Standard Time)}
Date {Fri Jan 20 2012 00:00:00 GMT+0700 (SE Asia Standard Time)}
Date {Fri Jan 20 2012 00:00:00 GMT+0700 (SE Asia Standard Time)}
Date {Fri Jan 20 2012 00:00:00 GMT+0700 (SE Asia Standard Time)}

---

EDIT:

I saw that whenever you interact with the Date Picker, the behavior goes different. Try another test, change the now is something like interact with Date Picker:

// create a date object for this Friday:
var d = new Date(2012, 0, 20);
//override Date constructor so all newly constructed dates return this Friday
Date = function(){return d;};

var now = new Date();
var another = new Date();
console.log(now);

another.setDate(13);

now = new Date()
console.log(now);

And the result is:

Date {Fri Jan 20 2012 00:00:00 GMT+0700 (SE Asia Standard Time)}
Date {Fri Jan 13 2012 00:00:00 GMT+0700 (SE Asia Standard Time)}

So, what goes wrong? You already overridden core Date function by

Date = function(){return d;}; // after construction, all date will be d (2012-01-20)
var now = new Date(); // you instantiate a date, but actually now variable is d (2012-01-20)
var another = new Date(); // you instantiate a date, but another is still d (2012-01-20)
another.setDate(13); // change another date to 13 is to change now to 13 (because now and another is still one d)

now = new Date() // still d
console.log(now); // print out now (2012-01-13)

So, you overrides core Date function by a function that causes all date use the same (just one) instance, which is d (2012-01-20). Change any dates affect others.

Answer 3

This is working for me.

IE how to return process time 1 minute back

Date = class extends Date{
     constructor(options) {
       if (options) {
         super(options);
       } else {
         super(Date.now() - 1000 * 60);
       }
     }
   };

Answer 4

Give this a shot.

var d = new Date(2012, 0, 20);
// undefine date so that it will only return what your function returns
Date = undefined;   
Date = function(){return d;}

Modifying the prototype to point to your object should do the trick.

I believe the strange behavior you were experiencing earlier was that privately Date holds some notion of time, and since the prototype points to that internal clock, you were getting random times.

Answer 5

Alex Stanovsky 's answer almost did it for me but this modification made the constructor work like before when given parameters.

    Date = class extends Date {
      constructor(...options) {
        if (options.length) {
          super(...options);
        } else {
          super(2019, 2, 11, 19, 19);
        }
      }
    };

Answer 6

I used the below to enforce UTC dates

var _f = function(item) { 
   Date.prototype["get" + item] = Date.prototype["getUTC" + item];  
   Date.prototype["set" + item] = Date.prototype["setUTC" + item];  
}
var _d = ['Milliseconds', 'Seconds', 'Minutes', 'Hours', 'Date', 'Month', 'FullYear', 'Year', 'Day'];
_d.forEach(_f);

Date = class extends Date {
   constructor(...options) {
      if (options.length == 1 && options[0].constructor == Date) {
         super(options[0]);
      } else if (options.length > 0) {
         super(Date.UTC(...options));
      } else {
         super(Date.UTC());
      }
   }
};