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 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
Jquery之美中不足小结
Feb 16 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
JS重载实现方法分析
Dec 16 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
微信小程序实现签到弹窗动画
Sep 21 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
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
浅析php单例模式
2014/11/25 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
Python常用模块之requests模块用法分析
2019/05/15 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
客服文员岗位职责
2013/11/29 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
自我查摆剖析材料
2014/10/11 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
骨干教师申报材料
2014/12/17 职场文书
主持人开幕词
2015/01/29 职场文书
被告答辩状范文
2015/05/22 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
一文弄懂MySQL索引创建原则
2022/02/28 MySQL