Question

我已经声明了showData（），但是当调用saveEdit（）时，它仍然显示未定义。我在saveEdit（）内部调用了showData（），以在编辑本地存储数据后以表格格式显示本地存储内容。对于javascript来说，它是新手，因此很难理解错误在哪里。据我所知，首先定义函数，然后可以在稍后定义的函数中调用它。

class UserDetails{

  constructor()
  {
    this.arr = [];
    this.editIndex= null;
  }

  //delete the data from the local storage
  deleteData(index) {
    this.arr.splice(parseInt(index), 1);
    let value = JSON.stringify(this.arr);
    localStorage.setItem("localData", value); 
    let td = event.target.parentNode; 
    let tr = td.parentNode;
    tr.parentNode.removeChild(tr);
  }

  //get data from local storage and display the local storage data on the screen
  showData() {
    let tbl = document.getElementById("tableDisplay");
    let str = localStorage.getItem("localData");
    let x = tbl.rows.length;

    while(--x){
      tbl.deleteRow(x);
    }
    //checking whether the local storage is not empty
    if (str != null) {
      this.arr = JSON.parse(str);

      for (let i = 0; i < this.arr.length; i++) {
        let r = tbl.insertRow();
        r.innerHTML=`
          <td>${this.arr[i].fName}</td>
          <td>${this.arr[i].lName}</td>
          <td>${this.arr[i].age}</td>
          <td>${this.arr[i].email}</td>
          <td>${this.arr[i].number}</td>
          <td>
            <button type="button" class="btn btn-warning" onClick="test.editData(${i});"> Edit </button>
            <button type="button" class="btn btn-danger" onClick="test.deleteData(${i});"> Delete </button>
          </td>`;
      }
    }

    document.getElementById("fName").value = "";
    document.getElementById("lName").value = "";
    document.getElementById("age").value = "";
    document.getElementById("email").value = "";
    document.getElementById("number").value = "";
    document.getElementById("saveBtn").style.display = "none";
    document.getElementById("addBtn").style.display = "block";
  }

  //empty the local storage
  deleteLocalStorageData() {
    localStorage.clear();
    document.getElementById("tableDisplay").innerHTML = "All Data Deleted!";
  }

  //edit the data in the local storage
  editData(index) {
    this.editIndex = index;
    document.getElementById("fName").value = this.arr[index].fName;
    document.getElementById("lName").value = this.arr[index].lName;
    document.getElementById("age").value = this.arr[index].age;
    document.getElementById("email").value = this.arr[index].email;
    document.getElementById("number").value = this.arr[index].number;
    document.getElementById("addBtn").style.display = "none";
    document.getElementById("saveBtn").style.display = "block";
  }

  saveEdit() {

    this.arr[this.editIndex] = {
      fName: document.getElementById("fName").value,
      lName: document.getElementById("lName").value,
      age: document.getElementById("age").value,
      email: document.getElementById("email").value,
      number: document.getElementById("number").value
    };

    localStorage.setItem("localData", JSON.stringify(this.arr));
    showData();
  }

  //add data to local storage
  addData() {

    this.arr.push({
      fName: document.getElementById("fName").value,
      lName: document.getElementById("lName").value,
      age: document.getElementById("age").value,
      email: document.getElementById("email").value,
      number: document.getElementById("number").value
    });

    localStorage.setItem("localData", JSON.stringify(this.arr)); 

    let tr=document.createElement("tr");
    tr.innerHTML=`
    <td>${name}</td>
    <td>${age}</td>
    <td>${email}</td>
    <td>${contact}</td>
    <td>
      <button type="button" class="btn btn-warning" onClick="test.editData(${i});"> Edit </button>
      <button type="button" class="btn btn-danger" onClick="test.deleteData(${i});"> Delete </button>
    </td>`;

    document.getElementById("tableDisplay").appendChild(tr);

    document.getElementById("fName").value = "";
    document.getElementById("lName").value = "";
    document.getElementById("age").value = "";
    document.getElementById("email").value = "";
    document.getElementById("number").value = "";
    document.getElementById("saveBtn").style.display = "none";
    document.getElementById("addBtn").style.display = "block";

  }
}

let test = new UserDetails();
test.showData();

Answer 1

在调用class实例的方法时，应使用this关键字来引用实例。

this.showData()

请注意，class主要是function的语法糖，class方法实际上只是class（函数）原型上的方法。

此：

class MyClass {
  myMethod(){

  }
}

是语法糖吗？

function MyClass(){

}

MyClass.prototype.myMethod = function(){

}

即使先定义函数，函数仍显示未定义

1 个答案: