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

Question

When I print one of my objects (created via ajax calls) to the console I am getting back:

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

But when I manually create the object I am correctly getting back:

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

Could someone explain to me the difference between these two objects, and why I am unable to access the properties of the first object?

Edit: The first object is being created by:

var obj = {}

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

print(obj);

The second I am hand crafting:

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

Answer 1

This is a classic case of misunderstanding asynchronous programming. Here's what you need to know:

1. JavaScript is single-threaded, so it can only do one thing at a time.

2. The callback function in .then attached to $http.get is asynchronous -- it is not immediately executed. Instead, it is queued up for execution whenever the Ajax request returns from the server.

3. Asynchronous callbacks cannot run until the current function has completed. They cannot commandeer the execution thread, but must patiently wait for the current function to finish using it.

Thus, when print(obj); is run, obj has not yet been assigned any properties because neither asynchronous callback has had a chance to run.

If you do see properties when you expand the Object that is produced on the console, it's because Chrome is lazy about supplying properties for objects printed in the console. It will only ask the object for its properties when you actually click to expand it (at which time the callbacks will have completed).

Answer 2

The first one is simply being print ed before the xhr response has returned, so the object is empty at the time it is logged.

The second one is logged after it has been populated.