В чем смысл аннотаций (внутреннее свойство) в окне инструментов google dev tools?

Question

Кто-нибудь, пожалуйста, объясните, что означает эти аннотации после : в консоли google dev?

Например, когда я вхожу baz в консоли, она возвращает треугольник с аннотацией Foo в сторону. Что означает это Foo?

И в чем смысл Object в __proto__: Object?

Другой вопрос, когда я вешаю свою мышь на маленькой синей i кнопки, она подсказывает, что Value below was evaluated just now. Что это значит?

Я попытался найти ссылки на эти вопросы, но не смог. Любые ресурсы будут очень приветствоваться.

Answer 1

Что означает это Foo?

Это имя конструктора, используемого для создания этого объекта.

function Foo(){} // constructor function 
new Foo() 

А какой смысл объекта в прото: Object?

Это следующий прототип в цепочке прототипов, наследуемый объект baz.

Попробуйте немного более сложный пример:

function Bar(){} 
Bar.prototype.someFunction = function(){} 
function Foo(){} 
Foo.prototype = Object.create(Bar.prototype, {}) // or Foo.prototype = new Bar() 
new Foo() 

Первое значение в цепи прототипов Foo является экземпляром объекта Bar. Объект Bar также имеет прототип, но это просто неназванный объект (он не имеет функции-конструктора, такой как Foo или Bar).

Этот объект также имеет прототип, который является всего лишь общим Object.prototype, который наследует все объекты.

Другой вопрос, когда я повесить мышь на кнопку небольшой голубой, она подсказывает, что стоимость ниже была оценена только сейчас. Что это значит?

Это означает, что объект отображается со значениями свойств, которые он имеет сейчас, а не со значениями, которые он имел во время регистрации.

Возьмем такой пример:

var obj = {a: 20} 
console.log(obj) 
obj.a = 100 

Сначала Devtools напечатает основной снимок объекта:

Но когда вы расширить объект DevTools использует текущие значения объекта вместо использования моментального снимка.