为什么在运行函数之前更改此对象？

Question

我有一个对象，其中包含一个（类对象）数组作为其值之一。我有一个函数，该函数部分在该数组内的一个对象（在对象内部）上运行类方法。

当我运行代码时，在函数之前和之后打印数组，更改都在函数运行之前和之后出现。

为什么会这样？吊装？

作为测试，我在对象中创建了另一个key：value对，使得该值是整数，然后将函数更改为将那个整数增加1。在这里，它可以正常工作-在对象之前打印我的对象函数的整数为1，然后为2。

我还尝试了不对对象使用类方法进行调整，但仍然失败。

class Book{
constructor (color, title, pagecount){
    this.color = color;
    this.title = title;
    this.pagecount = pagecount;
}

changePages() {
    this.pagecount += 50;
}
}

let book1 = new Book("Red", "Book1", 100);
let book2 = new Book("Blue", "Book2", 200);
let book3 = new Book("Green", "Book3", 300);

var myBookArr = [book1, book2, book3]

var myObj = {arr: myBookArr, integerTest: 0}


function thisDoesStuff(){
    //other operations not related to myObj
    myObj.arr[0].changePages();
}

当我在两个console.logs中运行以下命令时，它表明arr [0]（即book1）有150页。

console.log(myObj);
changePages();
console.log(myObj);

我希望第一个console.log显示book1作为其原始值，然后函数对其进行更改。

Answer 1

请悬停在日志旁边带有i字母的图标上。

您会看到，Chrome（当然，如果您使用的是Chrome）会说：

  

下面的值刚刚被评估

发生这种情况是因为对象和其他复杂实体是通过引用而不是通过值传递的。因此，在扩展日志时，浏览器将获取参考的最新值。

尝试console.log复制您的值（例如console.log({...myObj})），或使用JSON.stringify或对象的其他类似字符串的表示形式。

---

请注意，这不是您的代码中的错误。它只是console.log的功能，因此（如果我正确解释的话）您的代码就可以了：）

Answer 2

您的代码是正确的，这完全是基于浏览器决定评估console.log输出的对象时。

在此处看到其他用户也有类似问题的帖子：

Weird behavior with objects & console.log