js 覆盖和重载 函数
更新时间：2009年09月25日 22:09:34 作者：
学过JAVA的人对函数的覆盖和重载肯定是再熟悉不过了。
学过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中的继承中的覆盖。
欢迎拍砖
重载指两个或多个函数的参数类型，顺序和数量以及返回值不一样。
覆盖指两个或多个函数的参数类型，顺序和数量以及返回值完全一样。
那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中的继承中的覆盖。
欢迎拍砖
相关文章
这篇文章为大家详细主要介绍了用JavaScript实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了JS验证输入的是否是数字及保留几位小数问题，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-05-05
本文主要介绍了Echarts中X轴/Y轴坐标标签显示不下的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-09-09
上一篇文章，我们定义了矩阵，这篇文章我们来给矩阵添加一些常用方法比如：toString方法、clone方法等，需要了解的朋友可以详细参考下2012-12-12
bootstrap能够增加兼容性的强大框架,在项目中用到了数据验证功能，今天小编就抽空给大家介绍下BootStrapValidator初使用教程详解，一起看看吧2017-02-02
下面小编就为大家带来一篇全面了解javascript中的错误处理机制。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
用JSON.parse 来转换成json对象，由于有注释的存在则无法正确转换甚至报错。匹配字符串中的所有注释，包括单行和多行注释2013-11-11
这篇文章主要介绍了JavaScript中的值类型详细介绍,本文讲解了Primitive、Object、JS自带全局对象、Immutable与Mutable等内容,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了详解使用JWT实现单点登录（完全跨域方案），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了JavaScript惰性载入函数,结合实例形式分析了JavaScript惰性载入函数的概念、原理、实现方法及相关操作注意事项,需要的朋友可以参考下2019-03-03
最新评论