如何从另一个 .js 文件调用 class？

Question

我对此很陌生，我正在尝试理解 javascript 中的 classes。所以我按照在线教程进行操作，一切似乎都正常，当我尝试像视频中那样做同样的事情时，我现在收到一条错误消息 "Uncaught ReferenceError: MyClassName is not defined"

我有 2 个文件：

app.js
class.js

在class.js

class MyClass {
    constructor(city, state){
        this.city = city;
        this.state = state;

    }
    message(){
        console.log('Hey!');
    }
}

在app.js

const myClass = new MyClass();

const btn = document.getElementById('submit');


btn.addEventListener('click', myClass.message());

我得到的错误是“Uncaught ReferenceError: MyClass is not defined”。

我的问题是如何从另一个文件实例化 class？我知道我做错了什么，但我不知道它是什么。

更新： 我的 HTML 文档是这样的。

<body>

    <div class="form-group">
                <button id="submit"  name="submit">Submit</button>
    </div>
    


<script src="app.js"></script>
<script src="class.js"></script>

</body>
</html>

请帮忙，谢谢你的时间。

Answer 1

我认为它给了你这个错误，因为你在 class.js 文件之前导入了 app.js 文件。先尝试导入 class.js 然后它应该可以工作。示例：

<body>

    <div class="form-group">
                <button id="submit"  name="submit">Submit</button>
    </div>
    

<script src="class.js"></script>
<script src="app.js"></script>

</body>
</html>

Answer 2

由于您 linked app.js 在 class.js 之前 linked，它首先加载，因此您无法访问 MyClass。切换 link app.js 和 class.js 的行，它应该运行没有错误。

<!DOCTYPE html>
<html lang="en">
  <body>
    <div class="form-group">
      <button id="submit" name="submit">
        Submit
      </button>
    </div>
  </body>
  <script type="text/javascript" src="class.js"></script>
  <script type="text/javascript" src="app.js"></script>
</html>

如何从另一个 .js 文件调用 class？

How to call a class from another ,js file?

javascript

class

es6-class