快捷導(dǎo)航

js 覆蓋和重載函數(shù)

更新時(shí)間：2009年09月25日 22:09:34 作者：

學(xué)過JAVA的人對(duì)函數(shù)的覆蓋和重載肯定是再熟悉不過了。

學(xué)過JAVA的人對(duì)函數(shù)的覆蓋和重載肯定是再熟悉不過了。
重載指兩個(gè)或多個(gè)函數(shù)的參數(shù)類型，順序和數(shù)量以及返回值不一樣。
覆蓋指兩個(gè)或多個(gè)函數(shù)的參數(shù)類型，順序和數(shù)量以及返回值完全一樣。
那javascript真的有這種特性么？
回答是JS中函數(shù)重名只會(huì)采用最后一個(gè)定義。
首先來看下下面的代碼

復(fù)制代碼代碼如下:

<!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"> 
<!-- 

     
    //展現(xiàn)結(jié)果 
    function showResult(result) { 
        var showDiv = document.getElementById('result'); 
        showDiv.innerHTML = ''; 
        showDiv.innerHTML = result; 
    }; 
    //展現(xiàn)結(jié)果2 
    function showResult2(result) { 
        var showDiv = document.getElementById('result2'); 
        showDiv.innerHTML = ''; 
        showDiv.innerHTML = result; 
    }; 
    //展現(xiàn)結(jié)果3 
    function showResult3(result) { 
        var showDiv = document.getElementById('result3'); 
        showDiv.innerHTML = ''; 
        showDiv.innerHTML = result; 
    }; 
    //測(cè)試同名方法 
    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測(cè)試，交換兩個(gè)函數(shù)的順序 
    //測(cè)試同名方法 
    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測(cè)試，測(cè)試覆蓋，同名同參數(shù) 
    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 的按鈕

頁(yè)面的結(jié)果為 this is a function named 'testFun' with one argument,the argument is undefined
然后按名為 function with one argument test 的按鈕
頁(yè)面的結(jié)果為 this is a function named 'testFun' with one argument,the argument is test
然后按名為 function with no arguments 的按鈕
頁(yè)面的結(jié)果為 this is a function named 'testFun2' with no arguments.
然后按名為 function with one argument test 的按鈕
頁(yè)面的結(jié)果為 this is a function named 'testFun2' with no arguments.

從以上的測(cè)試中我們發(fā)現(xiàn)我們只是點(diǎn)換了兩個(gè)函數(shù)的定義順序，結(jié)果大不相同。
從上面的測(cè)試中我們可以得出結(jié)論：重載的話，只要函數(shù)定義在下面就會(huì)覆蓋上面的函數(shù)定義。
好了，接下來看覆蓋。
按名為 test function share the same name and arguments. 的按鈕

頁(yè)面的結(jié)果為 this is a function named 'testFun3' second.
測(cè)試結(jié)果很明顯，結(jié)論也是和上面相同的。
最終，我們得出結(jié)論：
方法重名，JS會(huì)以最后定義的函數(shù)作為函數(shù)體。當(dāng)然這不包括JS中的繼承中的覆蓋。
歡迎拍磚

您可能感興趣的文章: