如何使用动态参数包装 javascript 函数？

Question

我想包装一些动态创建的 javascript 函数，类似于 Daniel 在这里接受的答案： How do I store javascript functions in a queue for them to be executed eventually

// Function wrapping code.
// fn - reference to function.
// context - what you want "this" to be.
// params - array of parameters to pass to function.
var wrapFunction = function(fn, context, params) {
    return function() {
        fn.apply(context, params);
    };
}

不同之处在于我希望参数值在执行时是动态的 - 是否可以在参数中传递对变量的引用，该变量可以在包装后更新？

这是我想做的：

// I have a function to be wrapped
var sayStuff = function(a,b) {
    console.log(a);
    console.log(b);
}

// Variables I'd like to pass
var randomNumberA = 0;
var randomNumberB = 0;

// Wrap the function
var fun = wrapFunction(sayStuff, this, [*reference randomNumberA*,*reference randomNumberB*]);

// variables get changed
randomNumberA = Math.random()*100;
randomNumberB = Math.random()*100;

// Execute the function using current values of randomNumberA & randomNumberB
fun();

如果可能的话，我想在不改变 sayStuff 的情况下这样做，我有很多像这样的现有函数我希望包装，它们也可以在包装之外使用，所以理想情况下我不想替换带有对象的参数。 希望这是有道理的，谢谢！

Answer 1

如果动态参数在上下文参数中定义，解决方案可以基于传递变量的名称，然后在执行时计算其当前值：

var wrapFunction = function(fn, context) {
  var xArg = arguments;
  return function() {
    var argsArray = [];
    for (var i = 2; i < xArg.length; i++) {
      argsArray.push(context[xArg[i]]);
    }
    fn.apply(context, argsArray);
  };
}

var sayStuff = function() {
  for (var i = 0; i < arguments.length; i++) {
    console.log('sayStuff func: ' + arguments[i]);
  }
}

var randomNumber1 = 0;
var randomNumber2 = 0;

var fun = wrapFunction(sayStuff, this, 'randomNumber1', 'randomNumber2');

randomNumber1 = Math.random()*100;
randomNumber2 = Math.random()*100;

console.log('randomNumber1: ' + randomNumber1);
console.log('randomNumber2: ' + randomNumber2);

fun();

Answer 2

如果函数和变量将在同一范围内创建，您可以使用它：

var randomNumber = 0;
var fun = function(){ alert(randomNumber); }

randomNumber = 10;

// Now this will alert 10, because when fun is executed
// JS looks in his scope to find what randomNumber is.
fun();

这是因为 javascript 中的函数作为闭包工作，它们携带着它们的环境。见：https://en.wikipedia.org/wiki/Closure_(computer_programming)

因此，如果randomNumber 将被更改到您绑定该函数的范围之外，您需要使用一个对象，这是因为在 javascript 中我们没有“指针”或要传递的引用。一种方法是使用对象。

function giveMeAFunction(){
  var params = { randomNumber: 0 }
  var fun = function(){ alert(scope.randomNumber); }
  return {fun: fun, scope: scope};
}

var paramsAndFun = giveMeAFunction()
// Now you can change the variables in the scope and call the function
paramsAndFun.params.randomNumber = 10;
paramsAndFun.fun(); // Will alert 10

// Now if you replace the entire params object it will not work
// This is because you will replacing it with a new object while
// The one that is referenced in the scope where fun was created is
// the old one.
paramsAndFun.params = { randomNumber: 15 };
paramsAndFun.fun(); // will still alert 10

现在让我们来解决问题的一部分。

已经有Function.prototype.bind 功能可以帮助您。

例如：

var sayStuff = function(opts) {
    alert(otions.randomNumber);
}

var options = { randomNumber: 0 };
var fun = sayStuff.bind(this, options);

options.randomNumber = 10;

fun(); // Will print 10

这里发生了很多事情。对不起，如果我把一切都弄糊涂了。