Question

不一定是问题，但是我不确定为什么我的代码会按它的方式工作，我希望在这里找到一些答案。

我编写的代码创建了两个对象：用户和公司。提交表单后，公司对象将发送到Mongodb数据库，并在其中接收_id。然后，我将此_id分配给用户对象，以将用户与公司相关联。

我在各个位置都有console.logs，以查看对象在不同方法之间传递时的外观。我发现当我在将companyId分配给该对象之前console.log该用户对象时，companyId属性是该用户对象的一部分。

async handleCreateAccount() {
  let company = Object.assign({}, {
    name: this.companyName,
    url: this.companyUrl
  });
  let user = Object.assign({}, {
    firstName: this.firstName,
    lastName: this.lastName,
    userName: this.userName,
    title: this.title,
    email: this.email,
    password: this.password,
  });

    console.log('user object no companyId', user)

  this.$store.dispatch('addCompany', company).then((company) => {
    this.companyId = company.id;
    this.handleCreateUser(user)
  })
},
handleCreateUser(user) {

   console.log('user object prior to assigning companyId property', user);

   Object.assign(user, {
     companyId: this.companyId
   })

   console.log('user object with companyId property', user)

}

我希望console.log('user object no companyId', user)显示我在console.log上方创建的用户对象的属性。

我希望console.log('user object prior to assigning companyId property', user)在将companyId分配给用户对象之前也显示该用户对象的属性。

我希望console.log('user object with companyId property', user)显示用户对象的属性并包括companyId属性。

所有三个控制台日志均显示具有正确值的companyId属性。为什么会这样？

Answer 1

给出以下代码：

var x = {};

function y() {
    setTimeout(function () {
        x.foo = 'aaa';
        console.log('after 100ms', x);
    }, 100);
    setTimeout(function () {
        x.bar = 'bbb';
        console.log('after 200ms', x);
    }, 200);
    setTimeout(function () {
        x.baz = 'ccc';
        console.log('after 300ms', x);
    }, 300);
    console.log('now', x);
}

y();

以及以下截屏视频：

似乎console.log在执行x时捕获了console.log的快照，但事实并非如此。当您检查x时，实际上会得到x，因为它现在在内存中。因此，为什么在输出中看到标有“现在”的属性foo，bar和baz。

这不是bug，在这里提到：

请注意，如果您在最新版本的Chrome和Firefox中记录对象，则在控制台上登录的内容是对该对象的引用，这不一定是您当时的对象的“值”调用console.log（），但这是打开控制台时对象的值。

来源：https://developer.mozilla.org/en-US/docs/Web/API/Console/log

作为“替代方法”，您可以自己创建该快照：

var x = {};

function snapshot(o) {
    return JSON.parse(JSON.stringify(o));
}

function y() {
    setTimeout(function () {
        x.foo = 'aaa';
        console.log('after 100ms', snapshot(x));
    }, 100);
    setTimeout(function () {
        x.bar = 'bbb';
        console.log('after 200ms', snapshot(x));
    }, 200);
    setTimeout(function () {
        x.baz = 'ccc';
        console.log('after 300ms', snapshot(x));
    }, 300);
    console.log('now', snapshot(x));
}

y();

鲜为人知的替代方法是使用console.table：

var x = {};


function y() {
    setTimeout(function () {
        x.foo = 'aaa';
        console.table(x);
    }, 100);
    setTimeout(function () {
        x.bar = 'bbb';
        console.table(x);
    }, 200);
    setTimeout(function () {
        x.baz = 'ccc';
        console.table(x);
    }, 300);
    console.table(x);
}

y();

您可以看到，每次console.table的调用都显示x的“可视”快照，即使您检查对象本身时，它仍会显示该对象，就像它现在在内存中一样：< / p>

Console.logging对象显示该对象包含尚未分配的属性

1 个答案: