Question

当我将我的一个对象（通过ajax调用创建）打印到控制台时，我回来了：

Object
discreet: Array[2]
range: Array[2]
__proto__: Object

但是当我手动创建对象时，我正在回复：

Object {range: Array[2], discreet: Array[2]}
discreet: Array[2]
range: Array[2]
__proto__: Object

有人可以向我解释这两个对象之间的区别，以及为什么我无法访问第一个对象的属性吗？

编辑：第一个对象由以下人员创建：

var obj = {}

$http.get('/discreet').then( function(data) { obj.discreet = data } );
$http.get('/range').then( function(data) { obj.range = data } );

print(obj);

第二个我手工制作：

var obj = { range: [1,2], discreet: [1,2] }
print(obj);

Answer 1

这是误解异步编程的经典案例。这是你需要知道的：

JavaScript是单线程的，因此一次只能做一件事。
附加到.then的{{1}}中的回调函数是异步的 - 不立即执行。相反，只要Ajax请求从服务器返回，它就会排队等待执行。
在当前函数完成之前，异步回调无法运行。他们无法征服执行线程，但必须耐心等待当前功能完成使用它。

因此，当$http.get运行时，print(obj);尚未分配任何属性，因为两个异步回调都没有机会运行。

如果您执行在展开控制台上生成的obj时看到属性，那是因为Chrome在为控制台中打印的对象提供属性方面很懒惰。当您实际单击以展开它时，它将仅询问对象的属性（此时回调将完成）。

Answer 2

第一个只是在print响应返回之前被xhr编辑，因此在记录时该对象为空。

第二个在填充后记录。

Chrome开发人员工具中控制台中对象之间的差异

2 个答案: