将联系表单信息存储到 JavaScript（ES6）中的类？

Question

我正在尝试构建一个 JS 应用程序，该应用程序在填写表单时实例化新的联系人对象。但是，当涉及到类时，我正在努力在获取输入字段和实例化联系人之间创建逻辑。

到目前为止的代码。

点击时创建联系人的类。

export class Create {

    addEventListeners () {
        document.querySelector('#new-contact').addEventListener("click", createContact);
    }

    createContact () {
        let contact = new Contact({
            contFn: 'Tim',
            contLn: 'Cook'
        })
    }

}

联系人的类。

'use strict';

export class Contact {

    constructor (contFn, contLn, contEmail, contPhone, contSocial) {
        this.contFn = contFn;
        this.contLn = contLn;
        this.contEmail = contEmail;     
        this.contPhone = contPhone;
        this.contSocial = contSocial;
    }

    printContact () {
        console.log(this.contFn);
        console.log(this.contLn);
    }

}

window.addEventListener('load', () => new Contact());

Answer 1

createContact 未定义。没有具有该名称的变量。它是一个方法，一个继承自实例原型的属性。您必须以this.createContact 的身份访问它。但是假设你在方法中使用Create 实例，你不能在没有losing context 的情况下直接传递它，所以你应该这样做

addEventListeners () {
    document.querySelector('#new-contact').addEventListener("click", (e) => this.createContact(e));
}

请注意，如果 class 没有其他作用，您可能不应该在这里使用它。