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 相关文章推荐
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
JS前端笔试题分析
Dec 19 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
JS鼠标滚动分页效果示例
Jul 05 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 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
smarty section简介与用法分析
2008/10/03 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
Python实现Dijkstra算法
2018/10/17 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
python 用下标截取字符串的实例
2018/12/25 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
python Selenium 库的使用技巧
2020/10/16 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
工商管理实习生自我鉴定范文
2013/12/18 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
ktv筹备计划书
2014/05/03 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
学生检讨书
2015/01/27 职场文书
党支部培养考察意见
2015/06/02 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
OpenCV-Python实现油画效果的实例
2021/06/08 Python
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS
mysql 生成连续日期及变量赋值
2022/03/20 MySQL