Javascript方法的覆盖和重写

本文主要介绍一个javascript特殊技巧,就是方法的覆盖和重写。一般来说,如果在JS中定义了两个相同名称的函数/方法,那么前一个函数等于定义无效,后一个函数才是有效的定义。也就是说如果有多个同名函数和方法,只有后定义函数和方法有效,所有前面定义的函数都算是无效的定义,顺序是从上而下的,即使参数不同也算是无效,因为判断依据只有函数名!!!这里有别于C#和JAVA语言之类的方法重载,只能算是重写,其实JS本来也没有方法重载,如果真的要实现方法重载具体要看这篇文章:javascript 实现函数/方法重载。

如何实现JS方法的覆盖和重写

其实要实现重写和覆盖是十分简单的,只要在要重写和覆盖的函数下面在定义一个同名的函数就可以了。先看下面这段方法重写示例代码(可直接复制到TXT文本中,另存为HTML就可以运行):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        function ShowMessage()
        {
            alert("11111111111!");
        }
        function ShowMessage(msg) {
            alert("提示信息:"+msg);
        }
        function ShowMessage() {
            //最终会弹出这里的提示,前面的两个函数定义是无效的!
            alert("提示信息三!");
        }
    </script>
</head>
<body>
    <input type="button" value="点击弹出提示信息" onclick="ShowMessage('测试传入参数');"/>
</body>
</html>

在上面的代码中,一共声明了三个同名函数ShowMessage,其中第二个ShowMessage函数还带有参数。虽然在按钮的点击事件中我们传入了函数的参数,但是最终还是执行最后一个定义的函数,即最终会弹出"提示信息三!"的对话提示框。所以才说JS没有像其他编程语言那样拥有重载的功能,只能自己利用一些技巧模拟出重载的效果。

JS重写适用的范围和注意事项!

重写和覆盖函数在一定程度上给予了开发者极大的方便,比如由于业务逻辑的需求,我们可以在特定的页面重写和覆盖掉原本的方法,从而重新编写出新的功能。

但是要注意的是,即使是JS的原本内部方法,也是会被覆盖掉,比如下面的代码:

<script type="text/javascript">
    function Array() {
        alert('数组构造函数被覆盖和重写了!');
    }
    function ShowMessage() {
        /*
        * 由于在此函数之前已经重新定义了一个Array()函数,
        * 所以当执行到下面的数组声明时,会执行上面的函数弹出一个警告框
        */
        var arr = new Array();
    }
</script>

我们可以看到JS的内部方法Array()也是可以被我们重写,这里是值得注意的,因为早些时候有个JSON劫持的漏洞有利用到此特性。另外从这里我们还可以发现,既然连JS原本的内部函数都可以进行覆盖,那么也就可以很轻松的对Object()函数进行覆盖和重写,也许在某些时候会用到这个特性来进行对象的构造函数的扩展操作。

还有另外一点要注意是,在利用这个便利的特性的同时,我们也要注意可能因为函数命名的相同而意外导致原本函数功能被重写和覆盖掉,造成某些严重的BUG和错误。毕竟在一个项目中开发人员总是会有变动,不熟悉项目的开发人员可能会被这个问题所困扰,确保函数命名不重复也是十分重要的。




原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/98353.html

(0)
上一篇 2021年8月21日
下一篇 2021年8月21日

相关推荐

发表回复

登录后才能评论