javascript - 覆盖的绑定(bind)函数具有未定义的参数

Question

我正在对客户网站上的一些第 3 方代码进行故障排除。客户遇到代码无法正常工作的问题。我发现问题与 bound JS 函数有关。传递给绑定(bind)函数的参数未定义。我不知道为什么。一切似乎都很好。然而，我随后发现客户端已经覆盖了Bind函数。这是他们拥有的:

Function.prototype.bind = function(scope) {
  var _function = this;

  return function() {
    return _function.apply(scope, arguments);
  };
};

如果我创建一个函数

var sumFunction = function(a, b){
  console.log("a: " + a);
  console.log("b: " + b);
  return a + b;
}

然后绑定(bind)那个函数:

var boundFunction = sumFunction.bind(null, 10);

当我调用该绑定(bind)函数时，我得到以下信息:

console.log(boundFunction(20));

a: 20
b: undefined
NaN

我发现了一个使用相同绑定(bind)函数的类似 SO 问题。 javascript custom scope binding function

看起来它曾经有效？我链接的 SO 问题似乎可以追溯到 2013 年，但现在它不适合我。

这只是过时了吗？ JavaScript 不是我的主要优势，但我的客户会想知道为什么他们的函数会导致问题。

我发现覆盖的绑定(bind)函数很奇怪。尤其是行 return _function.apply(scope, arguments); 似乎传递整个 arguments 对象是不正确的。它不应该只发送数组位置 1 和更高位置的参数吗？我试着把它改成这个来测试:

Function.prototype.bind = function(scope) {

  var _function = this;
  var newArgs = Array.prototype.slice.call(arguments, 1)

  return function() {
    return _function.apply(scope, newArgs );
  };
};

但现在我只得到以下内容:

console.log(boundFunction(20));

a: 10
b: undefined
NaN

Answer 1

当函数有界时，第一个参数之后可能会有一个参数数组，因此请使用 slice(1) 获取它们。调用函数时，获取所有参数，并连接两个参数数组。

连接两个参数数组:

Function.prototype.bind = function(scope) {
  var _function = this;
  var args1 = Array.prototype.slice.call(arguments, 1);

  return function() {
    var args2 = Array.prototype.slice.call(arguments, 0);
    return _function.apply(scope, args1.concat(args2));
  };
};

var sumFunction = function(a, b){
  console.log("a: " + a);
  console.log("b: " + b);
  return a + b;
}

var boundFunction = sumFunction.bind(null, 10);

console.log(boundFunction(20));

但是，在 arguments 上调用 slice 可能会导致 V8 引擎跳过函数优化。更好的方法是手动迭代 arguments，并将它们添加到单个数组中:

Function.prototype.bind = function(scope) {
  var args = [];
  var _function = this;
  for(var i = 1; i < arguments.length; i++) { args.push(arguments[i]); }

  return function() {
    var newArgs = args.slice(0);
    for(var i = 0; i < arguments.length; i++) { newArgs.push(arguments[i]); }
    return _function.apply(scope, newArgs);
  };
};

var sumFunction = function(a, b){
  console.log("a: " + a);
  console.log("b: " + b);
  return a + b;
}

var boundFunction = sumFunction.bind(null, 10);

console.log(boundFunction(20));