javascript - js中静态函数中传递对象作为参数

Question

我试图将新对象作为静态函数中的参数传递，但得到了意外的结果。 这是我的代码。但我想显示带有标题名称、作者姓名和 isbn 的表行。所以帮助解决这个问题。

    let bookTitle = document.querySelector("#title").value;
    let bookAuthor = document.querySelector("#author").value;
    let bookIsbn = document.querySelector("#isbn").value;
    
    class Book {
      constructor(title, author, isbn) {
        this.title = title;
        this.author = author;
        this.isbn = isbn;
      }
    }
    
    const makeNewBook = new Book(bookTitle, bookAuthor, bookIsbn);
    
    class MakeUi {
      static addTable(makeNewBook) {
        document.querySelector("#book-list").innerHTML = `<tr> 
                <td>  ${title} </td>
                <td>  ${author} </td>
                <td>  ${isbn} </td>
                <td>  <button class="btn btn-sm btn-danger"> X </button> </td>
           </tr>`;
      }
    }
    
    MakeUi.addTable(); 

这就是我得到的结果。

Answer 1

您需要首先从对象中获取值:

class MakeUi {
  static addTable(newBook) {
    const { title, author, isbn } = newBook; // Get the values from the object
    document.querySelector("#book-list").innerHTML = `<tr> 
                <td>  ${title} </td>
                <td>  ${author} </td>
                <td>  ${isbn} </td>
                <td>  <button class="btn btn-sm btn-danger"> X </button> </td>
           </tr>`;
  }
}

MakeUi.addTable(makeNewBook);