Не переживайте, это действительно может вызвать путаницу.

JavaScript поддерживает две основные парадигмы программирования: объектно-ориентированное программирование (ООП) в прототипном стиле и объектно-ориентированное программирование с использованием классов.

Ваш первый пример из книги представляет собой пример объектно-ориентированного программирования в прототипном стиле, где объекты наследуют свойства и методы от прототипа. В прототипном стиле создается "цепочка прототипов", где каждый объект имеет ссылку на свой прототип, и таким образом наследует его свойства и методы.

Второй пример, который вы привели из Codepen, использует объектно-ориентированное программирование с использованием классов. Это новый синтаксис, введенный в ES6 (ECMAScript 2015), который делает написание кода в стиле ООП более привычным для разработчиков, привыкших к классическим языкам программирования.

Оба подхода валидны и могут быть использованы в JavaScript. Выбор между ними зависит от ваших предпочтений и задачи, которую вы решаете. Некоторые разработчики предпочитают прототипный стиль из-за его гибкости и мощи, в то время как другие предпочитают использовать классы из-за их более явного и понятного синтаксиса.

Если вы сомневаетесь, какой подход выбрать, рекомендую попробовать оба и посмотреть, с каким вам удобнее работать. Как только вы определитесь, вы сможете более уверенно применять выбранный подход в своем коде.