javascript - 如何使用在其类上创建的方法将从类创建的对象添加到数组

Question

我创建了一个 Book 类，其中包含一个在单击按钮时将单个对象添加到数组的方法。但是当我单击它时，添加的是来自 DOM 的按钮本身。

这是代码：

class Book {
    constructor(title, author, year, poster){
        this.title = title;
        this.author = author;
        this.year = year
        this.poster = poster
    }
    addToFavourite(){
        favouriteBooks.push(this)
    }

}
const favouriteBooks = []
const booksList = [ new Book('you don\'t know js', ' Kyle Simpson', 2014, 'https://images-na.ssl-images-amazon.com/images/I/41T5H8u7fUL._SX331_BO1,204,203,200_.jpg'), 
                    new Book('javascript the definitive guide', 'David Flanagan', 1996, 'https://images-na.ssl-images-amazon.com/images/I/51wijnc-Y8L._SX379_BO1,204,203,200_.jpg'), 
                    new Book('Eloquent JavaScript', 'Marijn Haverbeke', 2011, 'https://eloquentjavascript.net/img/cover.jpg')
                ]


const renderBooks = (booksToRender)=>{  
    booksToRender.forEach(book =>{
        //elements to be created
        const bookContainer = document.createElement('article')
        const posterContainer = document.createElement('div')
        const poster = document.createElement('img')
        const bookTitle = document.createElement('h2')
        const bookYear = document.createElement('p')
        const bookAuthor = document.createElement('h3')
        const addToFavouriteBtn = document.createElement('button')

        //elements setup
        addToFavouriteBtn.addEventListener('click', book.addToFavourite)
        poster.src = book.poster
        bookTitle.textContent = book.title
        bookYear.textContent = book.year
        bookAuthor.textContent = book.author
        addToFavouriteBtn.textContent = 'Add to favourite'

        //elements render
        posterContainer.append(poster)
        bookContainer.append(posterContainer, bookTitle, bookYear, bookAuthor, addToFavouriteBtn)
        document.querySelector('main').append(bookContainer)
        
    })
}

renderBooks(booksList)

标签： javascriptarraysclassoopmethods

Answer 1

那是因为this点击事件触发时引用的是按钮而不是书籍，您需要将书籍绑定到方法，以便addToFavouriteBtn.addEventListener('click', book.addToFavourite)使其addToFavouriteBtn.addEventListener('click', book.addToFavourite.bind(book))按预期工作

class Book {
    constructor(title, author, year, poster){
        this.title = title;
        this.author = author;
        this.year = year
        this.poster = poster
    }
    addToFavourite(){
        favouriteBooks.push(this)
        // just demonstration
        console.clear();
        console.log("---Favourite Books:---\n", favouriteBooks);
    }

}
const favouriteBooks = []
const booksList = [ new Book('you don\'t know js', ' Kyle Simpson', 2014, 'https://images-na.ssl-images-amazon.com/images/I/41T5H8u7fUL._SX331_BO1,204,203,200_.jpg'), 
                    new Book('javascript the definitive guide', 'David Flanagan', 1996, 'https://images-na.ssl-images-amazon.com/images/I/51wijnc-Y8L._SX379_BO1,204,203,200_.jpg'), 
                    new Book('Eloquent JavaScript', 'Marijn Haverbeke', 2011, 'https://eloquentjavascript.net/img/cover.jpg')
                ]


const renderBooks = (booksToRender)=>{  
    booksToRender.forEach(book =>{
        //elements to be created
        const bookContainer = document.createElement('article')
        const posterContainer = document.createElement('div')
        const poster = document.createElement('img')
        const bookTitle = document.createElement('h2')
        const bookYear = document.createElement('p')
        const bookAuthor = document.createElement('h3')
        const addToFavouriteBtn = document.createElement('button')

        //elements setup
        addToFavouriteBtn.addEventListener('click', book.addToFavourite.bind(book))
        poster.src = book.poster
        bookTitle.textContent = book.title
        bookYear.textContent = book.year
        bookAuthor.textContent = book.author
        addToFavouriteBtn.textContent = 'Add to favourite'

        //elements render
        posterContainer.append(poster)
        bookContainer.append(posterContainer, bookTitle, bookYear, bookAuthor, addToFavouriteBtn)
        document.querySelector('main').append(bookContainer)
        
    })
}

renderBooks(booksList)

<main></main>