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);

现在我想将默认行为（在控制台中记录数据）更改为我们每个人的自定义逻辑。

我知道我们可以使用像this one这样的技术来实现对象文字继承：

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');
}));

覆盖对象文字内的函数

4 个答案: