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 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
Python中的文件和目录操作实现代码
2011/03/13 Python
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
Python编程中类与类的关系详解
2019/08/08 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
小学生优秀评语大全
2014/04/22 职场文书
开学典礼演讲稿
2014/05/23 职场文书
迎新晚会策划方案
2014/06/13 职场文书
视光学专业自荐信
2014/06/24 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
2015年林业工作总结
2015/05/14 职场文书
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技