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 相关文章推荐
分享20款好玩的jQuery游戏
Apr 17 Javascript
js相册效果代码(点击创建即可)
Apr 16 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
vuex管理状态仓库使用详解
Jul 29 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 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 goto语句简介和使用实例
2014/03/11 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
jquery tab插件制作实现代码
2010/06/22 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
python基础教程之基本内置数据类型介绍
2014/02/20 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
Python版名片管理系统
2018/11/30 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
通信研究生自荐信
2014/02/01 职场文书
参观接待方案
2014/03/17 职场文书
会计专业求职信范文
2015/03/19 职场文书
2015年商场工作总结
2015/04/27 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python