js 覆盖和重载 函数

  学过JAVA的人对函数的覆盖和重载肯定是再熟悉不过了。

  重载指两个或多个函数的参数类型,顺序和数量以及返回值不一样。

  覆盖指两个或多个函数的参数类型,顺序和数量以及返回值完全一样。

  那javascript真的有这种特性么?

  回答是JS中函数重名只会采用最后一个定义。

  首先来看下下面的代码

  

复制代码 代码如下:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

  <HTML>

  <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

  </HEAD>

  <SCRIPT LANGUAGE="JavaScript">

  <!--

  //展现结果

  function showResult(result) {

  var showDiv = document.getElementById('result');

  showDiv.innerHTML = '';

  showDiv.innerHTML = result;

  };

  //展现结果2

  function showResult2(result) {

  var showDiv = document.getElementById('result2');

  showDiv.innerHTML = '';

  showDiv.innerHTML = result;

  };

  //展现结果3

  function showResult3(result) {

  var showDiv = document.getElementById('result3');

  showDiv.innerHTML = '';

  showDiv.innerHTML = result;

  };

  //测试同名方法

  function testFun() {

  showResult('this is a function named \'testFun\' with no arguments.');

  };

  function testFun(arg) {

  showResult('this is a function named \'testFun\' with one argument,the argument is '+arg);

  };

  //2th测试,交换两个函数的顺序

  //测试同名方法

  function testFun2(arg) {

  showResult2('this is a function named \'testFun2\' with one argument,the argument is '+arg);

  };

  function testFun2() {

  showResult2('this is a function named \'testFun2\' with no arguments.');

  };

  //3th测试,测试覆盖,同名同参数

  function testFun3() {

  showResult3('this is a function named \'testFun3\' first.');

  };

  function testFun3() {

  showResult3('this is a function named \'testFun3\' second.');

  };

  //-->

  </SCRIPT>

  <BODY>

  <div>

  <input type='button' onclick='testFun();' value='function with no arguments'/></br>

  <input type='button' onclick="testFun('test');" value='function with one argument test'/>

  </div>

  <div id="result"></div>

  <hr>2th test <hr>

  <div>

  <input type='button' onclick='testFun2();' value='function with no arguments'/></br>

  <input type='button' onclick="testFun2('test');" value='function with one argument test'/>

  </div>

  <div id="result2"></div>

  <hr>3th test <hr>

  <div>

  <input type='button' onclick='testFun3();' value='test function share the same name and arguments.'/></br>

  </div>

  <div id="result3"></div>

  </BODY>

  </HTML>

  首先按名为 function with no arguments 的按钮

  页面的结果为 this is a function named 'testFun' with one argument,the argument is undefined

  然后按名为 function with one argument test 的按钮

  页面的结果为 this is a function named 'testFun' with one argument,the argument is test

  然后按名为 function with no arguments 的按钮

  页面的结果为 this is a function named 'testFun2' with no arguments.

  然后按名为 function with one argument test 的按钮

  页面的结果为 this is a function named 'testFun2' with no arguments.

  从以上的测试中我们发现我们只是点换了两个函数的定义顺序,结果大不相同。

  从上面的测试中我们可以得出结论: 重载的话,只要函数定义在下面就会覆盖上面的函数定义。

  好了,接下来看覆盖。

  按名为 test function share the same name and arguments. 的按钮

  页面的结果为 this is a function named 'testFun3' second.

  测试结果很明显,结论也是和上面相同的。

  最终,我们得出结论:

  方法重名,JS会以最后定义的函数作为函数体。当然这不包括JS中的继承中的覆盖。

  欢迎拍砖