Javascript函数重载，请解释John Resig(Jquery方式)文章

Question

我理解基于参数对象或通过显式检查参数的类型和长度来实现 JavaScript 重载。请解释一下这篇文章:http://ejohn.org/blog/javascript-method-overloading/ 。

Answer 1

下面的函数中有两个概念，我认为这可能是您感到困惑的根源。

• addMethod 使用 var old = object[name]; 将先前添加的函数的引用保留为闭包堆栈。
• addMethod 使用 Function.length( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/length ) 知道函数定义了多少个参数，并将其与它创建的闭包堆栈进行比较。如果不匹配，则转到下一个()；这就是 John Resig 所说的此方法产生的开销。

下面的代码创建的日志记录应该可以帮助您了解发生了什么。

// addMethod - By John Resig (MIT Licensed)
function addMethod(object, name, fn) {
  var old = object[name];
  object[name] = function() {
    if (fn.length == arguments.length) {
      console.log('Arguments and parameters count are the same, found the function');
      return fn.apply(this, arguments);
    }
    if (typeof old == 'function') {
      console.log('Arguments and parameters count are not the same, try the next function in the closure stack');
      return old.apply(this, arguments);
    }
  };
}

function Users() {
  // This will be at the bottom of the stack, every call will have to go through the functions below
  addMethod(this, "find", function() {
    console.log('Called with 0 arguments');
  });
  // This will be at the middle of the task
  addMethod(this, "find", function(name) {
    console.log('Called with one argument');
  });
  // This is the one with the least overhead
  addMethod(this, "find", function(first, last) {
    console.log('Called with two arguments');
  });
}

var users = new Users();
users.find();
users.find('John');
users.find('John', 'Resig');

在尝试理解函数时，请记住逐步了解它们。右键单击下面的图片并选择“在新选项卡中打开图片”

这里的 addMethods 会减少一点开销，恕我直言，语法更好，重复更少。

// addMethods - By Juan Methods, inspired by John Resig (MIT Licensed)
function addMethods(object, name /* fn, fn, fn ... */ ) {
  // Key is the parameter count for each passed in function, value is the function itself */
  var functionMap = {};
  for (var i = 2; i < arguments.length; i++) {
    functionMap[arguments[i].length] = arguments[i];
  }

  object[name] = function() {
    functionMap[arguments.length].apply(this, arguments);
  };
}

function Users() {
  // Now every function has constant overhead of a single map lookup, which
  // is less expensive than multiple method calls up the closure stack
  addMethods(this, "find", 
    function() {
      console.log('Called with 0 arguments');
    }, 
    function(name) {
      console.log('Called with one argument');
    },
    function(first, last) {
      console.log('Called with two arguments');
    }
  );
}

var users = new Users();
users.find();
users.find('Jack');
users.find('John', 'Resig');