JavaScript存在同名方法是如何实现调用的？-群英

JavaScript存在同名方法是如何实现调用的？

PHP中文网发表于 2021-09-11 17:56 次浏览

JavaScript存在同名方法是如何实现调用的？对于这个问题，是很多新手比较好奇的。下面小编就通过实例来给大家分享一下，如果存在同名同参的方法先调用哪一个？又是如果存在同名不同参的方法，先调用哪一个？

在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有帮助，想要了解更多请关注群英网络其它相关文章。

标签：javascript同名

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：css设置层级关系有什么方法？

下一篇：JavaScript隐藏元素的方法有多少种？