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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
33种Javascript 表格排序控件收集
Dec 03 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
vuejs绑定class和style样式
Apr 11 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中文件缓存转内存缓存的方法
2011/12/06 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
jquery ajax请求实例深入解析
2012/11/26 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
JS实现拼图游戏
2021/01/29 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
vue实现简单图片上传
2020/06/30 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
python实现爬虫下载漫画示例
2014/02/16 Python
python实现sublime3的less编译插件示例
2014/04/27 Python
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Python可变参数用法实例分析
2017/04/02 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
django表单的Widgets使用详解
2019/07/22 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
python实现单机五子棋
2020/08/28 Python
教师岗位职责范本
2013/12/29 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
春秋淹城导游词
2015/02/11 职场文书
python状态机transitions库详解
2021/06/02 Python
Golang 并发下的问题定位及解决方案
2022/03/16 Golang
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技