js 覆盖和重载 函数


Posted in Javascript onSeptember 25, 2009

学过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 相关文章推荐
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
domReady的实现案例
Nov 23 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
微信小程序解除10个请求并发限制
Dec 18 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
用Javascript 获取页面元素的位置的代码
Sep 25 #Javascript
Javascript 两个窗体之间传值实现代码
Sep 25 #Javascript
jQuery 使用手册(七)
Sep 23 #Javascript
jQuery 使用手册(六)
Sep 23 #Javascript
jQuery 使用手册(五)
Sep 23 #Javascript
jQuery 使用手册(四)
Sep 23 #Javascript
jQuery 使用手册(三)
Sep 23 #Javascript
You might like
用PHP实现Ftp用户的在线管理的代码
2007/03/06 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
js实现图片轮播效果
2015/12/19 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
itchat接口使用示例
2017/10/23 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
python线程的几种创建方式详解
2019/08/29 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
python 求定积分和不定积分示例
2019/11/20 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
大学四年规划书范文
2013/12/27 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
党的群众路线调研报告
2014/11/03 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
pytorch 如何使用float64训练
2021/05/24 Python
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python