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 相关文章推荐
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
Javascript模拟实现new原理解析
Mar 03 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
用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
ThinkPHP之getField详解
2014/06/20 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
Python3基础之函数用法
2014/08/13 Python
Python缩进和冒号详解
2016/06/01 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
python 编写简单网页服务器的实例
2018/06/01 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
Python常用数据分析模块原理解析
2020/07/20 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
冰淇淋开店创业计划书
2014/02/01 职场文书
银行开业庆典方案
2014/02/06 职场文书
采购经理岗位职责
2014/02/16 职场文书
环保倡议书50字
2014/05/15 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL