Javascript中，先定义的函数，可以被后定义的函数覆盖。因此Javascript不支持函数的重载。比如下面的例子：
- <script type="text/javascript">
- function p(a, b, c) {
- alert(a+b+c);
- }
- function p(a, b) {
- alert(a+b);
- }
- p(1,2,3);//alert 6;
- </script>
虽然有函数p(a, b, c)，但是由于语言的特性，该函数被后面的p(a,b)所覆盖。因此只能调用 function p(a, b)。事实上，javascript中函数的定义可以如下形式：
- var p = function (a,b,c) {
- alert(a + b + c);
- }
- var p = function (a, b) {
- alert(a + b);
- }
这种形式的定义，更直观的看出p被覆盖了。javascript不是纯粹的函数式语言，但是也拥有函数式语言的一些特性，在这里所有的函数都是对象。Javascript语言也不需要编译，因此也无法在编译期间绑定函数。因此javascript调用函数的时候，就直接使用该函数当前的定义。
Javascript语言中，函数的参数可以是不定个数，任何不确定的值都是默认为undifined。比如：
function p(a, b) {
document.writeln(a);
document.writeln(b);
}
调用p(1);会打印出 1 undefined。
因此使用这种方法可以变相的实现重载的功能，如下：
- function p() {
- if (arguments.length == 2) {
- document.writeln(arguments[0]); document.writeln(arguments[1]);
- }
- if (arguments.length == 3) {
- document.writeln(arguments[0]); document.writeln(arguments[1]); document.writeln(arguments[2]);
- }
- }
- p("a", "b");
- document.writeln("<br/>");
- p("a", "b", "c");
可以看到调用函数p，会根据参数的个数，调用不同的逻辑。这种方式虽然管用，但不够优雅。
使用apply方法，可以有更优雅的写法。
javascript中，函数即对象，因此作为对象，函数也有自己的一些方法，比如toString(), call(), apply()。了解apply方法前，先看一下和它类似的call方法。
call方法的签名如下：
call([thisObj[, arg1[, arg2[, [, argN]]]]])
call方法——代表别的对象调用方法。call方法允许你改变函数对象的上下文，如果参数thisObj 未提供，则默认global对象为thisObj。
具体看一个例子，理解call方法。
- var x = 1;
- var o = { x: 2 };
- function f() {
- this.showtime = function () { alert(Date()); }
- alert(this.x);
- }
- f();//先是调用f函数，然后会给global对象定义了一个showtime方法，alert出global的x变量的值。
- this.showtime(); //global对象的showtime()已经被定义了，因此可以调用。
- f.call(o); //代表o调用call方法，这时候上下文global被改成o对象，因此this.x就是o.x，this.showtime就是o.showtime()
- o.showtime(); //o.showtime()已经被定义了，因此可以调用。
call方法可以接参数，表示函数的参数，比如下面的例子
- var x = 0;
- var o = { x: 2 };
- function f(a,b) {
- alert(this.x+a+b);
- }
- f.call(o,3,4); //alert 9
apply方法和call方法相同，除了apply接受的参数是一个数组。
apply([thisObj[,argArray]])
因此上面的方法，改写成apply的话就得如下写：
- var x = 0;
- var o = { x: 2 };
- function f(a,b) {
- alert(this.x+a+b);
- }
- f.apply(o, [3, 4]);
网上有老外写了一套方法，专门实现类似重载的效果。
http://ejohn.org/blog/javascript-method-overloading/源码如下：
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <title></title>
- <script type="text/javascript">
- function addMethod(object, name, fn) {
- var old = object[name];//闭包
- object[name] = function () {
- if (fn.length == arguments.length)
- return fn.apply(this, arguments);
- else if (typeof old == 'function')
- return old.apply(this, arguments);
- };
- }
- function Users() {
- addMethod(this, "find", function () {
- // Find all users...
- alert();
- });
- addMethod(this, "find", function (name) {
- // Find a user by name
- alert(name);
- });
- addMethod(this, "find", function (first, last) {
- // Find a user by first and last name
- alert(first + " " + last);
- });
- }
- var users = new Users();
- users.find(); // Finds all
- users.find("John"); // Finds users by name
- users.find("John", "Resig"); // Finds users by first and last name
- users.find("John", "E", "Resig"); // Does nothing
- </script>
- </head>
- <body>
- </body>
- </html>
这套代码使用简单，但是比较难以读懂，主要应用到了闭包，old的值可以一直保存在内存中。通过轮询的方式，找出符合参数个数的function。代码较难读懂，而且效率也并不高。
下面，本人根据上述代码，做了一些小改动，使用一个array保存这些重载函数，避免使用闭包。因此可读性较好。但代码稍稍复杂点。
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <title></title>
- <script type="text/javascript">
- var chongzailist = new Array(); //存放重载函数的list
- function addMethod(object, name, fn) {
- if (object[name] == undefined) {
- object[name] = function () {
- // (arguments.length);
- for (c in chongzailist) {
- if (chongzailist[c]["Name"] == name) {
- for (f in chongzailist[c]["Func"]) {
- if (chongzailist[c]["Func"][f].length == arguments.length) {
- return chongzailist[c]["Func"][f].apply(null, arguments);
- }
- }
- }
- }
- }
- }
- var isexist = false;
- for (c in chongzailist) {
- if (chongzailist[c]["Name"] == name) {
- chongzailist[c]["Func"].push(fn);
- isexist = true;
- break;
- }
- }
- if (!isexist) {
- var fnlist = new Array();
- fnlist.push(fn);
- chongzailist.push(chongzai(name, fnlist));
- }
- }
- function chongzai(fname, fnlist) {
- return { Name: fname, Func: fnlist };
- }
- function Users() {
- addMethod(this, "find", function () {
- alert();
- });
- addMethod(this, "find", function (name) {
- alert(name);
- });
- addMethod(this, "find", function (first, last) {
- alert(first + " " + last);
- });
- addMethod(this, "get", function () {
- alert();
- });
- addMethod(this, "get", function (name) {
- alert(name);
- });
- addMethod(this, "get", function (first, last) {
- alert(first + " " + last);
- });
- }
- //Users();
- var users = new Users();
- users.find(); // Finds all
- users.find("John"); // Finds users by name
- users.find("John", "Resig"); // Finds users by first and last name
- users.find("John", "E", "Resig"); // Does nothing
- users.get(); // Finds all
- users.get("John"); // Finds users by name
- users.get("John", "Resig"); // Finds users by first and last name
- users.get("John", "E", "Resig"); // Does nothing
- </script>
- </head>
- <body>
- </body>
- </html>
参考文档：
http://ejohn.org/blog/javascript-method-overloading/
http://odetocode.com/Articles/473.aspx
http://odetocode.com/blogs/scott/archive/2007/07/05/function-apply-and-function-call-in-javascript.aspx
本文转自cnn23711151CTO博客，原文链接：http://blog.51cto.com/cnn237111/963703 ，如需转载请自行联系原作者
