Library.add 不是函数错误

Question

我正在尝试执行这段代码：

var addButton = document.querySelector("#add");
var searchButton = document.querySelector("#search");
var titleInput = document.querySelector("#title");

function Book(title) {
    this.title = title;
}

function Library() {
    this.books = [];
}

Library.prototype.add = function() {
    this.add = function(book) {
        this.books.push(book);
    };
}

var library = new Library();

//Library UI
var libraryUI = {
    //Add a new book
    addBook: function() {
        var listItem = libraryUI.createNewBook(titleInput.value);
        Library.add(listItem);
        console.log(Library.books);
    },
    //Create a new book
    createNewBook: function(title) {
        var book = new Book(title);
        return book;
    }
};

addButton.addEventListener("click", libraryUI.addBook);

HTML 在这里：

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Library App</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>

        <h1>Personal Library</h1>

        <label for="title">Title: </label>
        <input type="text" id="title">

        <button id="add">Add</button>
        <button id="search">Search</button>

        <p id="display"></p>

        <script src="js/app.js"></script>
    </body>
</html>

我想做的是按下 addButton，onclick 将运行 libraryUI 对象下的 addBook 函数。然后，输入字段中的书名将用于创建一个包含书名的对象。我想将该书添加到 Library 实例中的书籍列表（数组）中。当我尝试使用以下代码执行此操作时，出现错误 "Uncaught TypeError: Library.add is not a function"。我认为 Library.add 是一个函数。

我补充了：

var library = new Library();

因为我以为我忘记创建一个 Library 的迭代，但我仍然想出了完全相同的错误。请帮忙。 :)

Answer 1

var addButton = document.querySelector("#add");
var searchButton = document.querySelector("#search");
var titleInput = document.querySelector("#title");

function Book(title) {
    this.title = title;
}

function Library() {
    this.books = [];
}

Library.prototype.add = function(book) {
   this.books.push(book);
}

var library = new Library();

//Library UI
var libraryUI = {
    //Add a new book
    addBook: function() {
        var listItem = libraryUI.createNewBook(titleInput.value);
        library.add(listItem);
        console.log(library.books);
    },
    //Create a new book
    createNewBook: function(title) {
        var book = new Book(title);
        return book;
    }
};

addButton.addEventListener("click", libraryUI.addBook);

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Library App</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>

        <h1>Personal Library</h1>

        <label for="title">Title: </label>
        <input type="text" id="title">

        <button id="add">Add</button>
        <button id="search">Search</button>

        <p id="display"></p>

        <script src="js/app.js"></script>
    </body>
</html>

不应该是library.add而不是Library.add吗？

还有：为什么：

Library.prototype.add = function() { this.add = function(book) { this.books.push(book); }; }

而不是：

Library.prototype.add = function(book) { this.books.push(book); }

?

如果我将 Library.add 更改为 library.add 和 console.log(library.books)，我想这就是您想要的。

Library.add 不是函数错误

Library.add is not a function error

javascript

constructor

prototype

function

object