Javascript 从模块内部访问全局变量

Question

I am trying to access a global variable or a function from inside the module, but it still writes error that testFunction is not defined.

index.html:
<script src="main.js" type="module">

main.js:
import { runTestFunction } from './js/TestModule.js';
function testFunction() {
 alert('hello');
 }
runTestFunction();

TestModule.js:
export function runTestFunction() {
testFunction();
}

Answer 1

You declare testFunction() in main.js but you are trying to call it in TestModule.js

You have a few choices:

1. Declare testFucntion() in TestModule.js
2. Implement the body of testFunction() in runTestFunction()
3. If you need to declare a function in main.js and then call it in TestModule.js then pass it to runTestFunction() as a parameter like:

:

TestModule.js:
export function runTestFunction(testFunction) {
    testFunction();
}

main.js:
import { runTestFunction } from './js/TestModule.js';
const testFunction=()=>{
     alert('hello');
 }
runTestFunction(testFunction);

EDIT: To follow up on your comment about scope chain.

The reason why it is "not declared" because you have the import before the declaration. The code is executed from top to bottom. This means the function is declared after you tried to reference it.