JS在多个文件中有相同的函数名时问题

小松学Java2022

已于 2022-12-12 11:24:22 修改

阅读量1k

点赞数

文章标签： javascript 前端 vue.js

于 2022-12-12 11:11:20 首次发布

本文链接：https://blog.csdn.net/qq_43595591/article/details/128284148

版权

在页面引用的多个JS文件时,当多个文件中存在相同函数名时，执行的函数是最后一个引用的文件名中的函数。

例如在A，B这两个JS文件中都有list函数时，如果页面引用的顺序是AB文件.那么在页面中执行getParams函数时，都是执行的B文件中的函数，本人猜想js函数存在函数覆盖问题。

A.js

var api = {

    list:function(){
        console.log('111111111111');
    }

}

B.js

var api = {

    list:function(){
        console.log('2222222222');
    }

}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script src="A.js"></script>
    <script src="B.js"></script>
   
</head>
<body>
    
    <script>
        api.list();
    </script>


</body>
</html>

看代码，此时B.js文件在下面，B会覆盖A，所以，调用的方法是B的list
在这里插入图片描述

那么，将A,B这个js文件顺序变换了呢？
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script src="b.js"></script>
    <script src="a.js"></script>
   
   
</head>
<body>
    
    <script>
        api.list();
    </script>


</body>
</html>

查看这次的结果
在这里插入图片描述

在AB两js文件中均有list函数时，在A中的test函数中调用list函数时，执行的不是A文件中的list函数，而是B文件中的list函数

解惑：
如果在html中只引入了A.js文件，此时调用test(),此时执行的就是A中的list（）

A.js

var api = {

    list:function(){
        console.log('111111111111');
    }

}

function test(){
    api.list();
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script src="a.js"></script>
   
</head>
<body>
    
    <script>
        test();
    </script>


</body>
</html>

结果是：
在这里插入图片描述

问题就出现在html中既引入了A.js，又引入了B.js，如果B.js文件在下面
那么此时整个api对象就是B的，A的api对象被覆盖了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
     <script src="a.js"></script>
    <script src="b.js"></script>
   
</head>
<body>
    
    <script>
        test();
    </script>


</body>
</html>