alvvi

Bar [[Prototype => Foo]] так обозначу объект которому вы не дали название, создающийся через new Bar();

1. При первом вызове print в конструкторе Foo:
- this ссылается на объект Bar [[Prototype => Foo]]
- при вызове this.print() соотвественно идет поиск метода print в этом объекте
- до прототипа мы не доходим, поскольку метод есть в объекте Bar и он уже определен даже до окончания вызова construct(!), вызываем метод
- вызов super() еще не закончился, this.id установлен со значением 'foo' в строке выше до вызова метода print(), соотвественно на выходе получаем: 'bar foo'

2. Вызов super() закончился. В свойство this.id нашего объекта записываем значение 'bar' в следующей строке.
- Вызваем print в конструкторе Bar
- JS ищет метод в объетке Bar [[Prototype => Foo]], опять находит его в самом объекте, до прототипа не доходим
- На выходе получаем: 'bar bar'

3. Последний вызов самое легкое. super.print() это то же самое что bar.prototype.print(). Систему поиска методов в объекте обходим, напрямую вызываем метод прототипа
- this.id объекта установили на этапе 2, его последнее значение 'bar'
- напоминаю, вызваем именно метод из прототипа, получаем 'foo bar'

На самом деле все довольно прямолинейно конкретно в этом примере, если понимать протоипное наследование и то, что синтаксис классов лишь синтаксический сахар скрывающий функции-конструкторы с установкой прототипов.

Подробнее почитать тут: https://learn.javascript.ru/prototypes
Про особенности super: https://learn.javascript.ru/class-inheritance

Вызовы типа

window.property = 'string'
window.function = () => 'hey there'

это по сути объявление глобальных переменных, которые будут доступны всем скриптам. Используется на практике в случае, где данные операции/свойства необходимо объявить на сервере.

Например, таким образом можно записать в объект window свойство с каким-нибудь JSON-конфигом из PHP или другого серверного языка или просто передать информацию из серверного языка в качестве переменной.

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

function watchAboutProduct(){
  let id1 = $(this).attr('product-id');
  let product = breadProduct.find(product => product["id"] === id1);
}

А лучше breadProduct превратить в объект в котором ключи будут id-шниками. Если продуктов ожидается много и искать придется часто. Тогда поиск упростится до breadProduct[id1].

function restoreNames(users) {
  users.forEach(user => {
      if (!user.firstName) {
        user.firstName = user.fullName.split(" ")[0];  
      }
  })
}

Конструкторы о которых говорится в учебнике можно получить очень просто:
console.log(Object);
Только вот увидите вы следующее:
// ƒ Object() { [native code] }
По сути встроенные классы - обычные функции-конструкторы, просто выполняются нативным кодом браузера + у них определны все необходимые методы в prototype. Про это как раз в учебнике и написано. Стоит прочитать там же про прототипное наследование, чтобы сложилась более полная картина.

ассоциативный массив === объект? Если да, то

const obj = { hello: 'world' }
Object.keys(obj) // ['hello']
Object.values(obj) // ['world']

Object.defineProperty(obj, prop, descriptor)
Это то что вам нужно, на сайте с докой есть пример:

// Example of an object property added
// with defineProperty with an accessor property descriptor
var bValue = 38;
Object.defineProperty(o, 'b', {
  // Using shorthand method names (ES2015 feature).
  // This is equivalent to:
  // get: function() { return bValue; },
  // set: function(newValue) { bValue = newValue; },
  get() { return bValue; },
  set(newValue) { bValue = newValue; },
  enumerable: true,
  configurable: true
});

Ссылка

НАПРИМЕР вот как событие по клику реализовано в стандарте ES5

ES5 тут не при чем, это синтаксис jQuery
в ES5/ES6 на DOM-ивенты подписываются методом

target.addEventListener(type, listener[, options]);

где type - тип ивента,
target - объект реализующий EventTarget интерфейс (например Element),
listener - коллбэк который вызывается после ивента.

Можно и без jQuery, на CSS сделать.
Но если надо именно с jQuery:

$('[data-raiting]').each(function(i, el) {
  var $el = $(el)
  var raiting = $el.data('raiting')
  var $icons = $el.find('.stars i')
  // дальше берем нужное количество элементов и добавляем класс/красим 
  // через style
  $icons.slice(0, raiting + 1).addClass('star--filled')
})

.star--filled {
  color: yellow;
}

const ref = querySelector('selector')
document.body.contains(ref) // true
ref.remove()
document.body.contains(ref) // false

Ну впрочем contains есть у любого нода, не только document.body