javascript - 为什么将联系人添加到数组的方法不起作用？

Question

我在方法中添加了一个新联系人:addToBook()。首先，我检查字段，如果它们不为空，则创建 LocalStorage 类的实例并传递字段值并从中生成 JSON。

我想查看数组和 LocalStorage 中的新产品，但收到错误:

Uncaught TypeError: Can not read property 'push' of undefined"

帮我解决一下。

class Contacts {
  constructor() {
    // Storage Array
    this.contacts = [];
  }

  addToBook() {
    let isNull = forms.name.value != '' && forms.phone.value != '' &&
      forms.email.value != '';
    if (isNull) {
      // format the input into a valid JSON structure
      let obj = new LocalStorage(forms.name.value,
        forms.phone.value, forms.email.value);
      this.contacts.push(obj);
      localStorage["addbook"] = JSON.stringify(this.contacts);
      console.log(this.contacts);
    }
    console.log(this.contacts);
  }
}
let contacts = new Contacts();
class Forms {
  constructor() {
    // Blocks
    this.addNewContact = document.getElementById("addNewContact");
    this.registerForm = document.querySelector('.addNewContact-form');
    // Forms
    this.fields = document.forms.register.elements;
    this.name = this.fields[0].value;
    this.phone = this.fields[1].value;
    this.email = this.fields[2].value;
    // Buttons
    this.cancelBtn = document.getElementById("Cancel");
    this.addBtn = document.getElementById("Add");
    this.BookDiv = document.querySelector('.addbook');
    // display the form div
    this.addNewContact.addEventListener("click", (e) => {
      this.registerForm.style.display = "block";
      if (this.registerForm.style.display = "block") {
        this.BookDiv.style.display = "none";
      }
    });

    this.cancelBtn.addEventListener("click", (e) => {
      this.registerForm.style.display = "none";
      if (this.registerForm.style.display = "none") {
        this.BookDiv.style.display = "block";
      }
    });
    this.addBtn.addEventListener("click", contacts.addToBook);
  }
}
let forms = new Forms();

class LocalStorage {
  constructor(name, phone, email) {
    this.name = name;
    this.phone = phone;
    this.email = email;
  }
}

<div class="AddNewContact">
  <button id="addNewContact" type="button">Add new contact</button>
  <i class="fas fa-search "></i>
  <input type="text" placeholder="SEARCH BY NAME">
  <button id="ImportData" type="button">Import data to book</button>
</div>
<div class="addNewContact-form">
  <form name="register">
    <label for="name">Name</label><input type="text" id="name" class="formFields">
    <label for="phone">Phone</label><input type="text" id="phone" class="formFields">
    <label for="email">E-Mail</label><input type="text" id="email" class="formFields">
    <br><br>
    <button id="Add" type="button">Add Now</button><button id="Cancel" type="button">Cancel</button>
  </form>
</div>

Answer 1

当您传递对这样的函数的引用时:

this.addBtn.addEventListener("click", contacts.addToBook);

您失去了与this的绑定(bind)。当您在 addToBook()

中调用 this.contacts.push(obj); 时，您依赖于哪个

您可以硬绑定(bind)您想要 this 的引用:

this.addBtn.addEventListener("click", contacts.addToBook.bind(contacts);

您还可以传入一个函数，该函数使用正确的上下文显式调用 addToBook:

this.addBtn.addEventListener("click", () => contacts.addToBook());