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 相关文章推荐
JS Timing
Apr 21 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
vue中实现回车键登录功能
Feb 19 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中in_array函数使用的问题与解决办法
2016/09/11 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
JS 树形递归实例代码
2010/05/18 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
vue--vuex详解
2019/04/15 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
python利用hook技术破解https的实例代码
2013/03/25 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
电脑专业个人求职信范文
2014/02/04 职场文书
农村文化建设标语
2014/10/07 职场文书
质量整改报告范文
2014/11/08 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
农业项目投资意向书
2015/05/09 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python