我们可以在另一个 JS 文件中调用用一个 JavaScript 编写的函数吗？

IT技术 javascript include
2021-01-23 16:42:13

我们可以在另一个JS文件中调用一个JS文件中编写的函数吗？谁能帮助我如何从另一个 JS 文件调用该函数？

6个回答

只要在第一次使用函数之前加载了包含函数定义的文件，就可以像在同一个 JS 文件中一样调用该函数。

IE

文件1.js

function alertNumber(number) {
    alert(number);
}

文件2.js

function alertOne() {
     alertNumber("one");
}

HTML

<head>
....
    <script src="File1.js" type="text/javascript"></script> 
    <script src="File2.js" type="text/javascript"></script> 
....
</head>
<body>
....
    <script type="text/javascript">
       alertOne();
    </script>
....
</body>

另一种方法行不通。 正如Stuart Wakefield正确指出的那样。另一种方式也将起作用。

HTML

<head>
....
    <script src="File2.js" type="text/javascript"></script> 
    <script src="File1.js" type="text/javascript"></script> 
....
</head>
<body>
....
    <script type="text/javascript">
       alertOne();
    </script>
....
</body>

不起作用的是：

HTML

<head>
....
    <script src="File2.js" type="text/javascript"></script> 
    <script type="text/javascript">
       alertOne();
    </script>
    <script src="File1.js" type="text/javascript"></script> 
....
</head>
<body>
....
</body>

虽然alertOne在调用时已经定义了，但在内部使用了一个尚未定义的函数( alertNumber)。

通过将 JS 文件包含在 Index.html 文件中的示例与我们使用 JS 导入方法从另一个具有 JS 脚本方法导出到导出方法的 JS 文件中导入方法的示例之间有什么不同。
2021-03-19 16:42:13

上面的答案有一个错误的假设，即文件的包含顺序很重要。因为在调用alertOne 函数之前不会调用alertNumber 函数。只要两个文件都包含在alertOne被调用的时间里，文件的顺序无关紧要：

[HTML]

<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript">
    alertOne( );
</script>

[JS]

// File1.js
function alertNumber( n ) {
    alert( n );
};
// File2.js
function alertOne( ) {
    alertNumber( "one" );
};
// Inline
alertOne( ); // No errors

或者可以按如下方式订购：

[HTML]

<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript">
    alertOne( );
</script>

[JS]

// File2.js
function alertOne( ) {
    alertNumber( "one" );
};
// File1.js
function alertNumber( n ) {
    alert( n );
};
// Inline
alertOne( ); // No errors

但如果你要这样做：

[HTML]

<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript">
    alertOne( );
</script>
<script type="text/javascript" src="file1.js"></script>

[JS]

// File2.js
function alertOne( ) {
    alertNumber( "one" );
};
// Inline
alertOne( ); // Error: alertNumber is not defined
// File1.js
function alertNumber( n ) {
    alert( n );
};

只与执行时可用的变量和函数有关。定义函数时，它不会执行或解析其中声明的任何变量，直到随后调用该函数。

包含不同的脚本文件与脚本在同一文件中的顺序没有区别，但延迟脚本除外：

<script type="text/javascript" src="myscript.js" defer="defer"></script>

那么你需要小心。

这可能听起来很挑剔，但包含与连接脚本并不完全相同。考虑 script1:function myfunction() {和 script2:alert();}它不会工作。这让我很烦恼，因为我试图module化一个太长的 js 文件。参见stackoverflow.com/questions/20311604/...
2021-03-22 16:42:13
this如果一个函数在一个类中，这个函数会共享上下文吗？
2021-03-27 16:42:13
this在调用函数时绑定（除非bind事先调用）。两个单独文件中的两个函数不会this自动共享上下文，在上面的示例中都没有this上下文，即window在非undefined严格模式或严格模式下。您可以通过将函数this分配为对象的成员（即在构造函数中this.method = myOtherFunc）或使用绑定来使另一个脚本中的函数共享相同的值。如果您需要更深入的答案，请发布更详细的 SO 问题。干杯，斯图尔特
2021-04-04 16:42:13

只要网页引用了两者，就可以。

您只需调用函数，就好像它们在同一个 JS 文件中一样。

ES6：不是<script>在 .html中包含许多 js 文件，您可以仅包含一个主文件，例如script.js使用属性type="module"（support），并且在内部script.js您可以包含其他文件：

<script type="module" src="script.js"></script>

并在script.js文件中包含另一个类似的文件：

import { hello } from './module.js';
...
// alert(hello());

在“module.js”中，您必须导出您将导入的函数/类

export function hello() {
    return "Hello World";
}

工作示例在这里。

如果包含所有文件，您可以从一个文件调用属性到另一个文件（如函数、变量、对象等）

您在一个 .js 文件中编写的 js 函数和变量 - 例如a.js将可用于其他 js 文件 - 比如说b.js只要a.js和b.js都包含在文件中使用以下包含机制（如果 b.js 中的函数调用 a.js 中的函数，则以相同的顺序）。

<script language="javascript" src="a.js"> and 
<script language="javascript" src="b.js">
其它你可能感兴趣的问题
上一篇如何防止表单从客户端多次提交？ 下一篇如何使用 ES6 类扩展函数？