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中的Split使用方法与技巧
Mar 09 Javascript
JavaScript Date对象 日期获取函数
Dec 19 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
请求时token过期自动刷新token操作
Sep 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
用libtemplate实现静态网页生成
2006/10/09 PHP
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
php服务器的系统详解
2019/10/12 PHP
JS window.opener返回父页面的应用
2009/10/24 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
Python获取央视节目单的实现代码
2015/07/25 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
Python如何实现远程方法调用
2020/08/07 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
放弃继承权公证书
2015/01/23 职场文书
建党伟业观后感
2015/06/01 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
mysql主从复制的实现步骤
2021/10/24 MySQL