對象文字內部的覆蓋函數

Question

我有以下對象文字：

var timeObject = {
    type: "double",
    grid: true,
    values: [
        //
    ],
    from_min: 0,
    to: 8,
    onChange: function(data) {
        console.log(data);
    }
};

該對象將傳遞到不同的位置：

$("#sundayTime").ionRangeSlider(timeObject);
$("#tuesdayTime").ionRangeSlider(timeObject);
$("#wednesdayTime").ionRangeSlider(timeObject);
$("#thursdayTime").ionRangeSlider(timeObject);
$("#fridayTime").ionRangeSlider(timeObject);
$("#saturdayTime").ionRangeSlider(timeObject);

現在，我想將默認行為（在控制台中記錄數據）更改為我的自定義邏輯。

我知道我們可以使用這種技術來實現對象文字繼承：

function extend(proto, literal) {
    var result = Object.create(proto);
    Object.keys(literal).forEach(function(key) {
        result[key] = literal[key];
    });
    return result;
}

對於使用它，我們有：

$("#thursdayTime").ionRangeSlider(extend(timeObject, {
    onChange: function (data) {
        console.log('thursdayTime');
    }
}));

$("#fridayTime").ionRangeSlider(extend(timeObject, {
    onChange: function (data) {
        console.log('fridayTime');
    }
}));

但我想知道是否有更簡單的方法可以做到這一點

提前致謝

Answer 1

如果您使用的是ES2015，則可以：

Object.assign({}, timeObject, {
  onChange: function(data) {
    console.log('whooof');
  } 
})

Answer 2

您可以使用真實繼承，而不是將所有屬性復制到新對象。

Object.assign(Object.create(timeObject), {
  onChange: function(data) {
    console.log('whooof');
  } 
});

Answer 3

我不確定性能，可以編寫返回該對象文字的函數：

function getConfig (onChange) {
  return timeObject = {
    type: "double",
    grid: true,
    values: [
        //
    ],
    from_min: 0,
    to: 8,
    onChange: onChange
  };
}

$("#fridayTime").ionRangeSlider(getConfig(function (data) {
  console.log('I am friday data:', data)
}));

如果所有天數（或多或少）相等，則可以簡化以下邏輯：

function getConfig (day) {
  return timeObject = {
    type: "double",
    grid: true,
    values: [
        //
    ],
    from_min: 0,
    to: 8,
    onChange: function (data) {
      console.log('I am', day, 'data:', data)
    }
  };
}

$("#fridayTime").ionRangeSlider(getConfig('friday'));

Answer 4

我認為除了使用另一個庫的方法（如建議的那樣）或添加像這樣的附加包裝函數之外，沒有什么比其他更短的（如果更短更容易）。

function eto(obj, onChangeFn){
    return extend(obj, {
        onChange: onChangeFn
    });
}

$("#thursdayTime").ionRangeSlider(eto(timeObject, function(data){
    console.log('thursdayTime');
}));