`
talentluke
  • 浏览: 591926 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

js 覆盖和重载函数

JavaScriptHTML 
阅读更多

学过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;
};

//1th测试
//测试同名方法
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>

<hr>1th test <hr>
<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动态的为元素添加带参数和不带参 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js 覆盖和重载 函数

    学过JAVA的人对函数的覆盖和重载肯定是再熟悉不过了。 重载指两个或多个函数的参数类型，顺序和数量以及返回值不一样。 覆盖指两个或多个函数的参数类型，顺序和数量以及返回值完全一样。 那javascript真的有这种...

    js中方法重载如何实现？以及函数的参数问题

    都知道在js中没有办法直接实现方法重载，因为在js中如果定义了多个名称相同，但参数个数不一样的方法，其实只有最后一个方法能被真正调用，其他的方法都被覆盖掉了。 但每一个函数都有一个特殊的参数arguments，利用...

    为JavaScript添加重载函数的辅助方法

    大家都习惯了重载带来的便利。JavaScript有没有重载呢？有人会回答没有，因为函数会被覆盖；有人说有，我们可以模拟重载这 一操作。

    JavaScript function函数种类详解

    本篇主要介绍普通函数、匿名函数、闭包函数 ...在Js中函数是没有重载，定义相同函数名、不同参数签名的函数，后面的函数会覆盖前面的函数。调用时，只会调用后面的函数。 var n1 = 1; function add(value1) { retur

    通过实例理解javascript中没有函数重载的概念

    将函数名想象为指针，也有助于理解为什么ECMAScript中没有函数重载的概念。如下例子： 代码如下: function addSomeNum(num) {  return num+100; } function addSomeNum(num) {  return num+200; } var result=...

    JavaScript中重名的函数与对象示例详析

    前言 本文主要给大家介绍了关于...JavaScript没有重载这个概念，它仅依据函数名来区分函数。 后定义的同名函数覆盖之前的，与参数无关。 function test() { console.log("test"); } test(); //输出 "test arg0 + un

    JS重载实现方法分析

    本文实例分析了JS重载实现方法。分享给大家供大家参考，具体如下： ...进而引出什么是重载：函数名相同，但是可以区分出来，想用哪个就用哪个，而不是后面的同名函数覆盖前面的 二、怎么用？ argume

    浅谈JavaScript function函数种类

    在Js中函数是没有重载，定义相同函数名、不同参数签名的函数，后面的函数会覆盖前面的函数。调用时，只会调用后面的函数。 代码如下: var n1 = 1;   function add(value1) {  return n1 + 1; } alert&#40;add(n1&...

    overlode:Javascript函数重载实用程序

    超越Javascript功能超载覆盖实用程序。 该实用程序独特的界面将使您更容易使用叠加功能。快速开始使用npm安装。 &gt; npm install overlode 或下载源文件 。 编写您的第一个叠加函数。 在这里，我们使用帮助进行检查。 ...

    Javascript 面向对象 重载

    假如 我这样定义： 代码如下: function getDate(){…..} function getDate(date){…..} 那么后一个方法将覆盖前一个，虽然不报错。 但是我们确实是可以实现重载的，如果你用过jQuery,你就会深有体会，比如$(“#btn”...

    Javascript 面向对象之重载

    上几节讲了 JavaScript 面向对象之命名空间 、 javascript 面向对象的JavaScript类 与 JavaScript 面向对象的之私有成员和公开成员 ，大家可以先看上面的再继续往下看。假如 我这样定义： 代码如下: function ...

    javascript 面向对象编程基础 多态

    重载：由于Javascript是弱类型的语言，而且又支持可变参数，当我们定义重载方法的时候，解释器无法通过参数类型和参数个数来区分不同的重载方法，因此方法重载是不被支持的！当先后定义了同名的方法的时候，后定义...

    vue.js学习相关文件-测试代码

    Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。 全部的按键别名： .enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left ...

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    -为所有控件增加Focus(覆盖Control默认的Focus函数)和GetFocusReference函数。 -增加示例(other/custom_postback.aspx)(feedback:thebox)。 -如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree...

    ExtAspNet_v2.3.2_dll

    -为所有控件增加Focus(覆盖Control默认的Focus函数)和GetFocusReference函数。 -增加示例(other/custom_postback.aspx)(feedback:thebox)。 -如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree...

    red-tetris-42：学校21的培训项目（莫斯科分校42分校）。 React + Express node.js

    捆绑Wbepack JS文件并热重载客户端代码 编写测试并检查代码覆盖率。 因为我们使用React，Redux，Node.js和Socket.io，所以我们必须定义3种单元测试： 像redux文档+ chai-equal-jsx解释的那样进行React Redux，而...

    解决 [removed] 被覆盖的问题方法

    手头在维护一个比较老的项目，由于页面的重组，一些不同页面的 js 被加载到了同一个页面，导致一个页面里可能有一个以上的 [removed] ，这样做的后果就是前面的回调函数会被后面的覆盖掉。 上网搜了一下，绝大部分的...

    web ajax 的使用 js封装

    ajax的使用，在js中已经封装好的类库。在真实项目中很有用的一个ajax

    red_tetris_boilerplate

    与Wbepack JS文件捆绑在一起并热重载客户端的代码 编写测试并检查代码覆盖率。 因为我们使用React，Redux，Node.js和Socket.io，所以我们必须定义3种单元测试： 像redux文档+ chai-equal-jsx解释的那样进行React ...

Magicbox
Global site tag (gtag.js) - Google Analytics