All the properties on an XMLHttpRequest instance are inherited properties, what i mean by that is that they don't exist on the instance itself but rather on its prototype chain.
This explains why
const x = new XMLHttpRequest()
// all these methods consider only instance properties (owned properties) and thats why they return empty results
console.log(Object.keys(x)) // []
console.log(Object.getOwnPropertyNames(x)) // []
console.log(Object.entries(x)) // []
console.log(JSON.stringify(x)) // {}
// however if you try this you will get the results you want
console.log(Object.keys(x.__proto__)) // will not return symbol keys
console.log(Object.getOwnPropertyDescriptors(x.__proto__)) // will return descriptiors of every property whether its symbol or not
// you can see these results also by logging the xmlRequest, and looking at its __proto__ property in the console
// i will be calling the XMLHttpRequest instance for short as xmlRequest
You can create such an object simply like this
class A {}
A.prototype.someProperty = 10
const a = new A()
// again if you try these you will get results like the XMLHttpRequest instance
console.log(Object.keys(a)) // []
console.log(Object.getOwnPropertyNames(a)) // []
console.log(Object.entries(a)) // []
console.log(JSON.stringify(a)) // {}
however when you try to console.log(a)
you won't see the someProperty
like you do with the xmlRequest instance, and this is expected, since it is an inherited property. The reason that you see these properties when you log the xmlRequest is that this object is recieving special treatment.
Luckily you can recreate such a special treatment using chrome custom object formatters, for this to work you have to enable custom formatters from chrome developer tools settings
window.devtoolsFormatters = [{
header: function(obj){
if (!(obj instanceof A)){
return null;
}
// to get the exact results like the xmlRequest, you need to remove quotes from the object keys in the json string, can be done with a regex
return ["div",{}, JSON.stringify(obj.__proto__)]
},
hasBody: function(){
return false;
}
}]
class A {}
A.prototype.someProperty = 10
console.log(new A()) // {"someProperty":10}
Object.create({get test() { return 1; }})
. But no, XHR is a host object and the console can do with it whatever it wants.