Почему свойства объекта XMLHttpRequest доступны для печати только через console.log()?

Это связано с спецификацией WhatWG console.log:

То, как реализация выводит аргументы, зависит от реализации, но реализации должны разделять объекты пробелом или чем-то подобным, поскольку это стало ожиданием разработчика.

Спецификация оставляет формат вывода очень расплывчатым, и реализация решает, что печатать.

Вы можете использовать новый тип данных под названием Symbol для создания ключей для объекта JavaScript.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol

Я приложил пример кода, и вы можете увидеть вывод в консоли.

let nameSymbol = Symbol('name');
function Person (name) {
	this[nameSymbol] = name;
}

Person.prototype.toString = function toPersonString() {
	var symArr = Object.getOwnPropertySymbols(this);
	for (let sym of symArr) {
		this[sym.description] = this[sym];
		delete this[sym];
	}
	return this;
}

const dummyObject = new Person('random value');

console.log("Object.keys():",Object.keys(dummyObject)); // []
console.log("Object.getOwnPropertyNames():",Object.getOwnPropertyNames(dummyObject)) // []
console.log("Object.entries():",Object.entries(dummyObject)) // []
console.log("JSON.stringify():",JSON.stringify(dummyObject)) // {}

console.log("console.log:", dummyObject.toString()); //  {name: "random value"}

Все свойства экземпляра XMLHttpRequest являются унаследованными свойствами, я имею в виду, что они существуют не в самом экземпляре, а в его цепочке прототипов.

Это объясняет, почему

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

Вы можете создать такой объект просто так

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)) // {}

однако при попытке console.log(a) вы не увидите someProperty, как в случае с экземпляром xmlRequest, и это ожидаемо, поскольку это унаследованное свойство. Причина, по которой вы видите эти свойства при регистрации xmlRequest, заключается в том, что этот объект получает специальную обработку.

К счастью, вы можете воссоздать такую ​​особую обработку, используя программы форматирования пользовательских объектов Chrome, чтобы это работало, вы должны включить пользовательские средства форматирования в настройках инструментов разработчика Chrome.

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}

Как я могу создать такой объект в javascript, свойства которого выводятся только с помощью console.log(obj), но не возвращаются ни одной из вышеперечисленных функций?

Одно близкое решение, которое я нашел, приведено ниже. Это напечатает свойства с console.log(obj). Однако obj является прокси.

На консоли Chrome результат такой же, как и вывод XMLHttpRequest (с классом Proxy). В консоли firefox это представление класса Proxy, так что это не совсем то же самое.

    const obj = new Proxy({prop1:"value1", prop2: "value2"}, {ownKeys: _=>[]});

    console.log("Object.keys():",Object.keys(obj));
    console.log("Object.getOwnPropertyNames():",Object.getOwnPropertyNames(obj))
    console.log("Object.entries():",Object.entries(obj))
    console.log("JSON.stringify():",JSON.stringify(obj))
    console.log(obj)

результат:

Object.keys(): []
Object.getOwnPropertyNames(): []
Object.entries(): []
JSON.stringify(): {}
console.log:
Прокси {prop1: "value1", prop2: "value2"}

и console.log(obj.prop1) / obj.prop1="newValue" все еще работает.

Object.keys: дает только собственное перечисляемое свойство объекта.

Object.getOwnPropertyNames: дает перечисляемые и неперечисляемые свойства, найденные непосредственно в данном объекте.

Object.entries: задайте собственные перечисляемые пары свойств объекта со строковыми ключами.

JSON.stringify: рассматривает только перечисляемые свойства объектов.

Создание собственного такого объекта

Вы можете использовать Object.create. который создаст новый объект, используя существующий объект в качестве прототипа вновь созданного объекта.

obj1 = {
  key1: 'some key'
};

var obj = Object.create(obj1);


console.log("Object.keys():",Object.keys(obj));
console.log("Object.getOwnPropertyNames():",Object.getOwnPropertyNames(obj))
console.log("Object.entries():",Object.entries(obj))
console.log("JSON.stringify():",JSON.stringify(obj))

console.log("console.log:"); console.log(obj)

Это потому, что прототипирование работает в Javascript, это настоящая причина.

Когда вы создаете экземпляр объекта из прототипа, свойства внутри __proto__ не будут отображаться (не перечисляемые свойства)

Например, попробуйте:

function MyXMLHttpRequest(){};
MyXMLHttpRequest.prototype.name = "Edward"
var obj = new MyXMLHttpRequest();

console.log("Object.keys():",Object.keys(obj));
console.log("Object.getOwnPropertyNames():",Object.getOwnPropertyNames(obj))
console.log("Object.entries():",Object.entries(obj))
console.log("JSON.stringify():",JSON.stringify(obj))
console.log("console.log:"); console.log(obj)
console.log(obj.name)

Ты увидишь:

Почему свойства объекта XMLHttpRequest доступны для печати только через console.log()?

Это не правда

var obj = new XMLHttpRequest();
for(var key in obj) console.log(key);

Ответ на вопрос из описания

Как я могу создать такой объект в javascript, свойства которого выводятся только с помощью

  var obj = Object.create({ foo: "foo", constructor: function() {} });

Если вы хотите скрыть свойство от for in, вы должны установить для атрибута enumerable значение false для желаемого свойства:

Object.defineProperty(obj, 'foo', {
  value: 42,
  enumerable: false
});

Я думаю, что это самый практичный способ. Это поможет вам

class User {
  //this is a private field
  #name
  get Name() {
    return this.#name
  }
  set Name(val) {
    this.#name = val
  }
}

var obj = new User()
obj.Name = 'test'

console.log('Object.keys():', Object.keys(obj))
console.log('Object.getOwnPropertyNames():', Object.getOwnPropertyNames(obj))
console.log('Object.entries():', Object.entries(obj))
console.log('JSON.stringify():', JSON.stringify(obj))

console.log('console.log:')
console.log(obj)
console.log(obj.Name)

это его скомпилированный код

function _classPrivateFieldSet(receiver, privateMap, value) {
  var descriptor = privateMap.get(receiver)
  if (!descriptor) {
    throw new TypeError('attempted to set private field on non-instance')
  }
  if (descriptor.set) {
    descriptor.set.call(receiver, value)
  } else {
    if (!descriptor.writable) {
      throw new TypeError('attempted to set read only private field')
    }
    descriptor.value = value
  }
  return value
}
function _classPrivateFieldGet(receiver, privateMap) {
  var descriptor = privateMap.get(receiver)
  if (!descriptor) {
    throw new TypeError('attempted to get private field on non-instance')
  }
  if (descriptor.get) {
    return descriptor.get.call(receiver)
  }
  return descriptor.value
} // Try edit message
class User {
  constructor() {
    _name.set(this, { writable: true, value: void 0 })
  }
  get Name() {
    return _classPrivateFieldGet(this, _name)
  }
  set Name(val) {
    _classPrivateFieldSet(this, _name, val)
  }
}
var _name = new WeakMap()
var obj = new User()
obj.Name = 'test'
console.log('Object.keys():', Object.keys(obj))
console.log('Object.getOwnPropertyNames():', Object.getOwnPropertyNames(obj))
console.log('Object.entries():', Object.entries(obj))
console.log('JSON.stringify():', JSON.stringify(obj))
console.log('console.log:')
console.log(obj)
console.log(obj.Name)

это результат скомпилированной версии на хроме

Это должно сработать.

var obj = Object.create({
    get name(){
        return 'I go only to console.log()';
    }
});
console.log("Object.keys():",Object.keys(obj));
console.log("Object.getOwnPropertyNames():",Object.getOwnPropertyNames(obj));
console.log("Object.entries():",Object.entries(obj));
console.log("JSON.stringify():",JSON.stringify(obj));

console.log("console.log:", obj);

Вы можете сделать что-то вроде этого:

Object.defineProperty(obj, 'key', {
    enumerable: false,
    value: '123'
});

В частности, enumerable штучка скрывает свойство.

Для получения дополнительной информации см. эту страницу: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

ОБНОВЛЕНИЕ:

Следующий подход (улучшенная версия вышеизложенного), кажется, скрывает свойства от всех упомянутых проверок, хотя он немного многословен:

var proto = {};
Object.defineProperty(proto, "key", {
    get: function () { return 123; }
});

var obj = Object.create(proto);

console.log(obj); // {}
console.log(Object.getOwnPropertyNames(obj)); // []
console.log(obj.key); // 123