首頁 >web前端 >js教程 >javascript出現同名方法會怎麼樣

javascript出現同名方法會怎麼樣

醉折花枝作酒筹原創: 2021-07-21 14:39:072648瀏覽

如果在兩個同名同參的JS方法同一個代碼段內部，則最後加載的方法會將前一個覆蓋掉，反之，如果能在當前代碼段找到對應的方法，就立即調用。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

在JS中，如果存在同名同參的方法，它會先呼叫哪一個？先看兩個例子：

範例1:

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function btnTest() {
            $f1();
            $f2();
        }

        function A() {
            alert(1);
        }
        var $f1 = A;
    </script>
    <script type="text/javascript">
        function A() {
            alert(2);
        }
        var $f2 = A;
    </script>
</head>

<body>
    <form>
        <div>
            <input type="button" name="Testing" οnclick="btnTest();" value="TEST" />
        </div>
    </form>
</body>
</html>

結果會跳出：1 2

範例2:

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function btnTest() {
            $f1();
            $f2();
        }

        function A() {
            alert(1);
        }
        var $f1 = A;
    
        function A() {
            alert(2);
        }
        var $f2 = A;
    </script>
</head>

<body>
    <form>
        <div>
            <input type="button" name="Testing" onclick="btnTest();" value="TEST" />
        </div>
    </form>
</body>
</html>

結果會彈出：2 2

這和目前的程式碼段有很大關係，如果在兩個同名同參的JS方法同一個程式碼段內部，則最後載入的方法會將前一個覆寫，反之，如果能在目前程式碼段找到對應的方法，就立即呼叫。

在JS中，如果存在同名不同參的方法，它會先呼叫哪一個？再看兩個例子：

範例1:

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function btnTest() {
            var val = document.getElementById("txtVal").value;
            if (val > 10) {
                A();
            }
            else {
                A(val);
            }
        }

        function A() {
            alert(1);
        }

        function A(val) {
            alert(2);
            alert(val);
        }
        
    </script>
</head>

<body>
    <form>
        <div>
            Input Value(INT):<input type="text" id="txtVal"/><br>
            <input type="button" name="Testing" onclick="btnTest();" value="TEST" />
        </div>
    </form>
</body>
</html>

範例2:

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function btnTest() {
            var val = document.getElementById("txtVal").value;
            if (val > 10) {
                A();
            }
            else {
                A(val);
            }
        }

        function A() {
            alert(1);
        }
    </script>
    <script type="text/javascript">
        function A(val) {
            alert(2);
            alert(val);
        }
    </script>
</head>

<body>
    <form>
        <div>
            Input Value(INT):<input type="text" id="txtVal"/><br>
            <input type="button" name="Testing" onclick="btnTest();" value="TEST" />
        </div>
    </form>
</body>
</html>

測試結果：同名不同參照的方法會用最後載入的方法會將前一個覆蓋掉！

【推薦學習：javascript進階教學】

以上是javascript出現同名方法會怎麼樣的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript JS

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：javascript如何設定width下一篇：javascript如何設定width

看更多