JavaScript OPTIONS 对象无法修改的技术问题求助

你遇到的问题核心在于**OPTIONS是一个带getter的属性，每次访问它都会返回一个全新的对象**。

看一下你的定义：

Object.defineProperty(DateTimePicker.prototype, "OPTIONS", {
    enumerable: true,
    get: function () {
        return {
            useStrict: false,
            format: this.FORMAT,
            maxDate: this.MAX_DATE,
            minDate: this.MIN_DATE,
            defaultDate: null,
            viewDate: null,
            icons: this.ICONS
        };
    }
});

每次你访问this.OPTIONS时，这个getter函数都会执行，返回一个新的对象实例。所以当你执行：

this.OPTIONS.defaultDate = value;
this.OPTIONS.viewDate = value;

实际上你是先获取了一个新对象，给它的defaultDate赋值，然后又获取了另一个全新的对象，给它的viewDate赋值——这两个操作完全是在两个不同的对象上进行的，根本不会影响到后续访问this.OPTIONS时返回的对象。

有两种常见的处理方式，你可以根据场景选择：

方案1：将OPTIONS改为实例属性，在构造函数中初始化 #

如果每个DateTimePicker实例需要独立的OPTIONS配置，最好在构造函数里初始化一个实例级的_options（或类似名称）变量，然后让getter返回这个变量，同时可以加setter或者直接允许修改这个变量：

function DateTimePicker() {
    // 初始化实例自己的配置对象
    this._options = {
        useStrict: false,
        format: this.FORMAT,
        maxDate: this.MAX_DATE,
        minDate: this.MIN_DATE,
        defaultDate: null,
        viewDate: null,
        icons: this.ICONS
    };
}

Object.defineProperty(DateTimePicker.prototype, "OPTIONS", {
    enumerable: true,
    get: function () {
        // 返回实例自己的配置对象，而不是每次新建
        return this._options;
    },
    // 可选：如果需要支持直接赋值OPTIONS整个对象，可以加setter
    set: function(newOptions) {
        this._options = {...this._options, ...newOptions};
    }
});

这样修改后，你访问this.OPTIONS时每次拿到的都是同一个实例对象，修改它的属性就会生效了：

let value = services.Date.momentFromDateString(val).format(this.FORMAT);
this.OPTIONS.defaultDate = value;
this.OPTIONS.viewDate = value;
// 后续访问this.OPTIONS就能看到更新后的属性了

方案2：如果OPTIONS是共享配置，直接定义为普通属性 #

如果所有DateTimePicker实例共享同一个OPTIONS配置，那可以直接把它定义在原型上，不需要getter：

DateTimePicker.prototype.OPTIONS = {
    useStrict: false,
    format: DateTimePicker.prototype.FORMAT,
    maxDate: DateTimePicker.prototype.MAX_DATE,
    minDate: DateTimePicker.prototype.MIN_DATE,
    defaultDate: null,
    viewDate: null,
    icons: DateTimePicker.prototype.ICONS
};

不过要注意，这种方式下所有实例会共享同一个对象，修改this.OPTIONS的属性会影响到所有实例，适合全局统一配置的场景。

核心问题就是getter每次返回新对象导致修改无效，通过将配置对象存储为实例属性（或原型共享属性），让每次访问OPTIONS都指向同一个对象，就能解决这个问题了。

内容的提问来源于stack exchange，提问作者Naomi