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操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 Javascript
js实现圆形菜单选择器
Dec 03 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中与数组相关的函数
2007/03/22 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
Python 基础教程之str和repr的详解
2017/08/20 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
python实现最大优先队列
2019/08/29 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
python 消费 kafka 数据教程
2019/12/21 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
竞选演讲稿范文
2013/12/28 职场文书
自我鉴定注意事项
2014/01/19 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
大学感恩节活动总结
2015/05/05 职场文书
中学团支部工作总结
2015/08/13 职场文书
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫