javascript - 将新创建的对象推送到 javascript 数组会覆盖以前数据的某些部分

Question

当将新创建的对象插入 javascript 数组时，数组的某些元素变得与最后一个相同，就好像最后一个插入的对象覆盖了旧对象中的某些部分。如下所示。

var urlRoot = "http://.../";
var allBooks = []; 
var i = 1;
var max = 2; //3;

getPage(i);

function getPage(bookNo) {

    if (i > max) {
        return;
    }

    $.ajax({
        url: urlRoot + bookNo,
        type: 'GET',
        cache: false,
        success: function(res) {
            var html = res.responseText;

            allBooks.push(new Book(html));
            //allBooks[i - 1] = new Book(html);

            console.log(allBooks);

            i++;
            getPage(i);
        }
    });
}

console.log(allBooks) 在仅推送两个元素和推送三个元素时给出以下结果(标签“EnglishbookHeading”的值发生变化；但数组“Pages”的内容与最后一个推送的内容相同。):

[Book, Book]
0: Book    
EnglishbookHeading: "Revelation"
Hadiths: Array[43]
__proto__: Book
1: Book    
EnglishbookHeading: "Belief"
Hadiths: Array[43]
__proto__: Book
length: 2

---

    Array[3]
0: Book
EnglishbookHeading: "Revelation"
Pages: Array[53]
__proto__: Book
1: Book
EnglishbookHeading: "Belief"
Pages: Array[53]
__proto__: Book
2: Book
EnglishbookHeading: "Knowledge"
Pages: Array[53]
__proto__: Book
length: 3

Book.js:

define(["Page"],
    function (Page) {

        var englishbookHeading;
        var thisPages = [];

        function Book(html) {
            setBook(html);

            this.EnglishbookHeading = englishbookHeading;
            this.Pages = thisPages;
        };

        function setBook(html) {
            var con = $(html); //Context

            ...

            var chapters = tumHadisler.find('div.chapter');
            var index = 0;

            chapters.each(function () {

                var Page = new Page();

                ...

                thisPages[index] = Page;

                index++;
            });
        }

        return Book;
    });

页面.js:

define(function () {

    function Page() {

        this.ChapterId = "";

        ...
    }

    return Page;
});

Answer 1

请参阅您使用相同数组对象 thisPages 作为 Book.Pages 属性值的问题，因此所有书籍将始终代表相同的 值>Pages 属性。

您需要将Book 引用传递给setBook 方法，这样您就可以只向特定书籍添加页面。例如，

   function Book(html) {
        this.EnglishbookHeading = englishbookHeading;
        this.Pages = [];
        setBook(this, html);
    };

    function setBook(book, html) {
        var con = $(html); //Context

        ...

        var chapters = tumHadisler.find('div.chapter');
        var index = 0;

        chapters.each(function () {

            var Page = new Page();

            ...

            book.Pages[index] = Page;

            index++;
        });
    }

另一种替代方法是在 setBook 方法中重置 thisPages，这也可以解决问题 - 例如，

function setBook(book, html) {
   thisPages = [];   // we are creating new array here that will be used for current book
   var con = $(html); //Context
   ...

我不确定你的编码风格和代码组织，所以选择一个适合你的。