PavelScron

var lol = {
	salary: 15,
	bonus: 100,
	gen: 'girl',
	total: function() {
		return this.salary + this.bonus
	}
};
//> lol.total() -> 115

var lol = {
  salary: 15,
  bonus: 100,
  gen: 'girl'
};

lol.total = lol.salary + total.bonus;
//> lol.total -> 115

Через this в литерале объекта(вне тела функции) вы обращаетесь к глобальному контексту - window или undefined в строгом режиме. Демо.
Можно использовать геттер:

var lol = {
  salary: 15,
  bonus: 100,
  gen: 'girl',
  get total() {
     return this.salary + this.bonus;
   }
}

console.log(lol.total);

или метод:

var lol = {
  salary: 15,
  bonus: 100,
  gen: 'girl',
  getTotal() {
     return this.salary + this.bonus;
   }
}

console.log(lol.getTotal());

предупреждает потому что http-трафик легко перехватить. если раздражает, это можно отключить.

тайм не парится, ибо секретного у него ничего нет.
а вот банку/платежной системе/личному кабинету/etc уже есть что терять, поэтому и используют https чтоб "спрятаться".

все ставят, потому что:
- есть слух, что это помогает в seo
- упала цена на сертификаты
- появились бесплатные сертификаты

call вызывает функцию с заданным контекстом, а bind, по своей сути есть обертка, привязывающая контекст, которую можно передать в функцию.

call - позднее связывание, bind - раннее связывание.

call-apply-decorators
bind

Ваш пример c call, без передачи аргументов, как написали уже выше, работать не будет.

Использую vscode+webpack+pug+scss+бэм. Из физических инструментов, основной моник: lg ultrawide 29um69g, рядом прикручен моник от ноутбука повешенный вертикально, подключенный через универсальный скаллер.

0) Запускаю Spotify :-)

1) Произвожу установку всех необходимых модулей для сборки. В моем случае у меня набор конфигураций для webpack (отдельные файлы для pug, scss, static и.т.д., выбираю что нужно).

2) Запускаю avocode, загружаю в него макет. Определяю в нем переменные (в то же время записываю их, чтобы сразу кинуть в scss файл) для цветов, размеров шрифтов и.т.д. чтобы при получении кусочков кода из него, он сразу расставлял переменные.

3) Запускаю VS Code, открываю нужную папку.

4) Пишу размету на Pug. Пишу с БЭМ, если встречаю повторяющийся блок, то открываю файл _mixins.pug, в который пишу миксины для повторяющихся блоков, например товаров, пунктов меню, каких-то блоков и.т.д. Pug умеет делать циклы, это ускоряет сильно.

5) Когда HTML готов, начинаю делать каркас. Если дизайн сделан по сетке, определяю контейнеры, колонки, строки в свои классы (не пишу в html тучи классов аля col-md-6, а пишу в SCSS инклуды в нужные мне блоки, типа @include make-col(2) и.т.д.).

6) Экспортирую картинки из Avocode. Очень делается просто, указываю папку и просто кликаю экспорт и ввожу название файла и расширения. Преимущественно для иконок использую svg, если нет svg, то ищу эту иконку в интернете (дизайнеры редко рисуют иконки сами, но зато любят вставлять их не в векторе). Если иконка простая, могу сам ее в inkscape обвести, ну и если нет, то экспортирую png в 2х размере (благо авокод это позволяет, если конечно дизайнер не вставил в исходном маленьком размере). Когда есть контакт с дизайнером, трясу его, ибо растр это плохо для иконок.

7) Пишу стили блоков из страницы. На этом этапе можно на втором монике параллельно смотреть футураму или
Арчера :-) Но чаще на широком монике слева браузер, справа VS Code, а на втором монике Avocode (может меняться местами с браузером). Мысленно нарезаю страницу на блоки. Для каждого блока (БЭМ) создаю отдельный scss файл (кто-то даже для элемента создает, но мне лень), из него сразу выписываю все селекторы. Иногда могу сначала выписать все селекторы со страницы (но так лучше не делать, т.к. во время работы может потребоваться изменить что-то в разметке), но чаще для одного блока выполняю этот пункт и за ним сразу выполняю пункт 8, потом для нового блока опять 7 и 8 и.т.д.

8) Пишу css код вместе с Avocode, у него беру нужные мне параметры (а он уже подставил в них переменные), и вставляю в мой код. И параллельно сверяю со скрином макета используя вот это расширение https://chrome.google.com/webstore/detail/perfectp...

9) Пишу адаптив. Я не могу привыкнуть к методологии mobile-first, поэтому пишу всегда сначала полную версию сайта. Я понимаю, что это чревато всякими проблемами и это типа не модно, но мне норм.

10) Медиа-запросы пишу прямо в блоках, для каждого блока/элемента/модификатора может быть отдельный медиа-запрос. Но для начала определяю breakpoint'ы для разных экранов (чтобы их не было сотни разных), если использую Bootstrap, то беру его breakpoint'ы.

11) Добавляю анимашки. Даже если заказчик не просил отдельно (и если не указал отдельно, что нельзя), он все равно будет доволен, а с animate.css+onscreen.js это вообще работа 10 минут. Сложные анимации обговариваю отдельно, чтобы не сделать ненужную работу.

11) Все снова сверяю, пишу скрипты где надо. Для слайдеров в 99% случаев подходит slick (с доработками конечно, но там хорошее API), для других случаев могу написать свой.

12) Сдаю заказчику и жду ответа сидя на тостере/пикабу.

Это чисто мой опыт, опыт фрилансера, не знаю, как делают другие и не могу на 100% утверждать что это 100% правильный способ. Я так и не смог заставить свой конфиг webpack правильно вставлять спрайты svg.
Надеюсь чем-то поможет мой ответ.

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

Разница в том, что в случае прототипов, вы единожды создаете функцию и потом конструктор раскидывает ссылку на эту функцию в ваше свойство suicide. А в первом случае, при каждом вызове конструктора будет создаваться отдельная копия данного метода.

Инста привязана жёстко на первую почту при потере всегда можно ее восстановить если есть доступ к первой почте

Разница в том, что при использовании коммерческих продуктов вы верите в поддержку разработчиков, а при использовании opensource - в самостоятельную поддержку, своими силами, или в поддержку какой-то сторонней компании, которая специализируется на коммерческих услугах пользователям opensource. Это - фундаментальная разница.
При этом, в общем случае, нет оснований считать, что коммерческая поддержка автоматически означает качество - криворукие программисты и админы есть и на зарплате у крупных фирм.
Остальное вообще никак прямо не связано с тем, является ли продукт коммерческим.

Сбрось масштаб страницы до 100%

Можно создать объект
let glob = {}
И дальше обращаться к нему из любого места
glob.x = 123;
Это и будет аналогом глобального объекта.
Другого способа нет.

Если же у вас глобальная let x, и вы её перекрыли другим let x, то вы не увидите глобальную, пока не выйдете из зоны действия локальной x. Локальная будет скрывать глобальную.

Потому что контекст не сохраняется, в setTimeout вызывается функция с глобальным контекстом. Варианты решения:
Забиндить контекст:
setTimeout(user.sayHi.bind(user), 1000);
Или же вызвать в анонимной функции
setTimeout(() => user.sayHi(), 1000);

Bind создает постоянный метод для обьекта, а call для одноразового использования, так пишет Флэнеган.

но у меня такая же обертка создается и работает через call.

Да ну?

Правильно будет так:
f.call('test2', 1, 2);

/// это не сравнение

if (e.target.className = "fuck") {

Вот правильно:
https://jsfiddle.net/hack2root/nytw2efk/33/

document.querySelector('.income').addEventListener('click', function (e) {
if (e.target.classList.contains("fuck")) {
    e.target.classList.toggle('redtext');
     alert(e.target.className);     
    
}
                                            
      
}
)

видимо, вы перепутали анонимные функции и самовызывающиеся.

Если этот код для вас сюрприз, то копайте глубже.

(function lol() {

  // глобальная переменная нашего скрипта
  var message = "Привет";

  // функция для вывода этой переменной
  function showMessage() {
    alert( message );
  }

  // выводим сообщение
  showMessage();

})(); //именованная IIFE функция

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

js на уровне движка создаёт невидимые классы.
Если написано:

(function () { console.log(1) })()
(function () { console.log(2) })()

То в движке это будет выглядеть так:

class C1
class C2