Vanilla Javascript 扩展类并在页面上使用它

Question

我正在使用 vanilla JS（无节点）

我在 2 个不同的文件中有 2 个类。 User.js 和 Admin.js 然后我得到了 MainController.js 和 index.php。

我想将import 用户转为管理员并扩展管理员。然后通过这两个类扩展 mainController 并在页面上使用它的代码。问题是当我尝试在 mainController 中扩展任何 class 时，它未定义，我无法在页面上使用它。除非我只导入它而不扩展任何类，否则我可以启动用 mainController 编写的函数，但我无法从脚本或控制台访问它。

我想将所有类从 User 和 Admin 导入 MainController 并在页面上使用它，这样索引就不会有多个脚本标签。

如果所有文件都在 1 个文件中，那么将所有内容添加到 1 个类并使用它不会有问题。问题在于多个文件。

例子：

用户

class User {
constructor(username, email){
    // Set up properties
    this.username = username;
    this.email = email;
    this.score = 0;
}.....

管理员

import User from './user.js';
export default class Admin extends User {

constructor(username, email, title){
    super(username, email);
    this.title = title;
}....

主控制器

import User from './user'
import Admin from "./admin";
class mainController extends User & Admin {

constructor(username, email, title){
    super(username, email);
    this.title = title;
}
}

索引.php

<script src=maincontroller.js></script>
<script> const xxx = new User()...</script>

Answer 1

您尝试实现class 继承的方式有问题。 Admin 已经是 extends User，因此没有必要尝试指定第三个 class extends Admin 也需要扩展 User。当您声明第三个class 扩展Admin 时，已经指定了这一点，因为Admin extends User。

因此，& 在语法上无效且在逻辑上是不必要的，语法修复：

class mainController extends Admin {

    constructor(username, email, title){
        super(username, email);
        this.title = title;
    }
}

话虽如此，我们需要了解mainController 和Admin 的名称在class 层次结构方面似乎完全不相关，因为mainController 似乎是一个控制器，而User/@ 987654341@ 似乎是模型类。所以，对我来说，您似乎希望mainController 与User/Admin 对象一起操作，并且您似乎认为您需要扩展这些类才能实现这一点。如果我是对的，那么在mainController 中，您可能需要将这些类的实例用作参数/变量/数据成员。