Question

所以我使用$ .extend来组合多个组件（对象）。这些组件中的一些具有相同键的功能。我希望最终的扩展对象具有相同的键，但是它指向一个函数，它一个接一个地调用所有合并组件的函数版本。

所以它看起来像这样：

var a = { foo: function() { console.log("a"); } };
var b = { foo: function() { console.log("b"); } };
var c = {}; // Doesn't have foo

var d = $.extend({}, a, b, c);
var e = $.extend({}, a, c);
var f = $.extend({}, c);

d.foo(); // Should call function() { console.log("a"); console.log("b"); }
e.foo(); // Should call function() { console.log("a"); }
f.foo(); // Should call function() {}

有没有务实的方法呢？我只想为一组特定的键执行此操作，因此我只想将这些特定键的功能合并在一起，并让扩展中的顺序覆盖其他任何内容。

希望这是有道理的：S

Answer 1

请注意

f.foo(); // Should call function() {}

对象c似乎没有属性foo。 callling f.foo()返回TypeError: undefined is not a function。不确定是否需要将foo函数添加到扩展f对象，或者从匿名函数返回对象c（空对象）？在下面的部分中，foo函数不已添加到扩展的f对象。

jquery $.Callbacks()用于在foo添加$.each()属性的函数

尝试

var a = { foo: function() { console.log("a"); } };
var b = { foo: function() { console.log("b"); } };
var c = {}; // Doesn't have foo

//d.foo(); 
// Should call function() { console.log("a"); console.log("b"); }
//e.foo(); 
// Should call function() { console.log("a"); }
//f.foo(); 
// Should call function() {}

var callbacks = $.Callbacks();
var arr = [], d, e, f;
$.each([a,b,c], function(k, v, j) {
  var j = [a,b,c];
  // filter objects having `foo` property
  if (v.hasOwnProperty("foo")) {
    arr.push([v, v.foo]);
    if (arr.length > 1) {
       callbacks.add(arr[0][1], arr[1][1]);
       // `add` `foo` properties to `callbacks`
       // `fire` both `callbacks` when `object.foo` called
       j[k -1].foo = callbacks.fire;
       d = $.extend({}, j[k - 1])
    } else {
       // `else` extend original data (`fn`, `object`) 
       // contained within object 
       e = $.extend({}, j[k + 1]);
       f = $.extend({}, j[++k + 1]);
    }
  }  
});

d.foo(); // `a` , `b`
e.foo(); // `b`
console.log(f); // `Object {}`
f.foo() // `TypeError: undefined is not a function`

jsfiddle http://jsfiddle.net/guest271314/3k35buc1/

请参阅jQuery.Callbacks()

Answer 2

根据来宾271314的答案，我最终得到了什么。 toMix是要混合到对象中的组件数组。我实际上并不需要我认为可能的虚函数，最后我使用函数数组而不是$ .Callbacks（），这样我就可以控制调用函数的顺序。我还需要使用call（）函数，以便我可以从正确的this对象调用函数。

this.functionMerge = function(toMix) {
  var callbacks = {};
  var functions = {};
  var obj = {};
  var keys = [
    'componentWillMount',
    'componentDidMount',
    'componentWillUpdate',
    'componentDidUpdate',
    'componentWillUnmount'
  ]

  $.each(keys, function(key, value) {
    callbacks[value] = [];
  });

  for (i = 0; i < toMix.length; ++i) {
    $.each(keys, function(key, value) {
      if (toMix[i].hasOwnProperty(value) && typeof toMix[i][value] == 'function') {
        callbacks[value].push(toMix[i][value]);
      }
    });
    $.extend(true, obj, toMix[i]);
  }

  $.each(keys, function(key, value) {
    functions[value] = function() {
      var that = this;
      $.each(callbacks[value], function(key, value) {
        value.call(that);
      });
    };
  });

  return $.extend(true, obj, functions);
}

jQuery使用相同的函数扩展多个对象

2 个答案: