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 学习笔记(六)
Dec 31 Javascript
js indexOf()定义和用法
Oct 21 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
使用js画图之画切线
Jan 12 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 Javascript
微信小程序使用前置摄像头拍照
Oct 22 Javascript
创建与框架无关的JavaScript插件
Dec 01 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如何得到当前页和上一页的地址?
2006/11/27 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
用javascript实现自定义标签
2007/05/08 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
js实现带有动画的返回顶部
2020/08/09 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
python实现kNN算法
2017/12/20 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
运动会开幕词
2015/01/28 职场文书