`
talentluke
  • 浏览: 606698 次
  • 性别: 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真的有这种...

    JavaScript中常用的函数类型.pdf

    本文将详细探讨JavaScript中常用的三种函数类型：可变函数、匿名函数和动态函数。 1、可变函数 在JavaScript中，函数可以接受不同数量的参数，即使它们在定义时没有指定。例如： ```javascript function show() {...

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

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

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

    JavaScript的动态类型和灵活的参数特性使得它不适合实现函数重载。JavaScript更强调的是代码的简洁和灵活性，因此语言的设计者选择了不包括函数重载机制，以适应这种灵活性。尽管这样，开发者可以通过其他方式（例如...

    java kok 构造与析构函数

    "卡拉OK表字段.doc"可能涉及数据库设计，而"Util.js"可能是JavaScript的实用工具库，与Java的构造函数和析构函数主题关系不大。 总的来说，理解和掌握构造函数、析构函数（以及在Java中的`finalize()`方法）、函数...

    JavaScript function函数种类详解

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

    JavaScript中的函数重载深入理解

    通过上述分析，我们可以看出，虽然JavaScript语言没有提供传统意义上的函数重载机制，但是通过变量、函数的动态特性和逻辑判断，我们仍然可以实现类似功能的编程模式。理解JavaScript中函数名作为指针的性质，对于...

    自定义滚动条jscroll.js修改改进后可动态重载滚动条

    本文将深入探讨如何通过修改和改进`jscroll.js`实现动态重载滚动条的功能。 首先，`jscroll.js`是一个JavaScript库，它允许开发者自定义浏览器的默认滚动条样式，提供更美观、符合设计感的滚动效果。原始的`jscroll...

    js面向对象编程之如何实现方法重载

    在JavaScript中，如果为同一个对象定义多个同名函数，那么最后一个定义的函数会覆盖前面定义的函数。这意味着，即使参数的数量或类型不同，最终调用的将是最后定义的函数，参数差异并不会影响函数的选择。 接下来，...

    浅谈JavaScript function函数种类

    JavaScript提供了多种函数表达式，这些表达式可以用来定义不同种类的函数，包括普通函数、匿名函数和闭包函数。下面我们将逐一介绍这些函数种类。 普通函数是最常见的函数类型，它们通过函数声明的方式定义，并且有...

    JavaScript函数的一些注意要点小结及js匿名函数

    然而，JavaScript不像某些其他语言那样支持函数重载，即具有相同名称但参数列表不同的函数。如果定义了两个同名函数，后面的定义会覆盖前面的。例如： ```javascript function add() { document.write(arguments[0...

    JS模拟实现方法重载示例

    这样，虽然不能在语言层面直接重载函数，但在逻辑上我们可以实现类似的效果。 在提供的示例中，首先定义了四个名为testFun1、testFun2、testFun3和testFun4的函数，它们分别接受不同数量的参数。这些函数的作用仅仅...

    总结js函数相关知识点

    JavaScript（简称JS）是目前使用最广泛的前端开发语言之一，而函数作为JS中的重要概念，扮演着举足轻重的角色。在本文中，我们将探讨与JS函数相关的一系列知识点，包括函数的定义、声明与表达式的区别、作用域、内部...

    web ajax 的使用 js封装

    【标签】"javascript Explained js类库 类的编写与应用，构造与析构函数，函数的重载，类的继承，函数覆盖，基类与派生类的构造函数、析构函数先后调用顺序" 在JavaScript中，虽然它不是一种传统的面向对象语言，但...

    javascript匿名函数实例分析

    闭包是一个函数和声明该函数的词法环境的组合。闭包让函数可以访问定义时作用域内的变量，即使函数是在当前作用域外执行。文中提到的变量f和匿名函数中的变量f不在同一个作用域内，这就是闭包的一个例子。闭包允许...

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

    在JavaScript编程语言中，存在一些特定的特性，如允许重命名的函数和对象，这可能会导致一些不寻常的行为。本文将深入探讨这些话题，并通过示例进行解释。 首先，JavaScript允许重复声明变量。这意味着，如果你在同...

    JavaScript中的Function函数

    - **覆盖**：JavaScript中没有函数重载，后定义的同名函数会覆盖前面的。 - **arguments对象**：当传入的参数数量多于定义的参数时，可以通过`arguments`对象访问额外的参数，如`showNames('张三', '李四', '王五'...

    JavaScript中如何通过arguments对象实现对象的重载

    需要注意的是，尽管我们可以用这种方式模拟函数重载，但JavaScript中如果存在同名函数，后面的定义会覆盖前面的定义，导致“重载”失效。因此，这种方法并不完全等同于传统意义上的函数重载，而是通过条件判断和`...

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