theWaR_13

Так будет показывать экземпляр класса:

class TestTwo {
  constructor() {
    this.logThis = logThis;
  }
}

Почитать.

Соответственно есть вопрос, почему в 4 случае он указывает на window?

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

function logThis() {
  console.log('logThis', this);
}
class TestTwo {
  constructor() {}
  log() {
    logThis();
    console.log('TestTwo.log', this);
  }
}

https://codesandbox.io/s/n4x93k3ppl

UPD: Тут как раз подоспела свежая статья на хабре: https://habr.com/company/ruvds/blog/422089/

WebStorm используйте, Notepad++ это явно не для быстрой верстки, кофе не поможет, это когда однажды нужно сделать срочную работу, сдать ее, и пойти пить совсем другой напиток, с обратным эффектом, а долговременно кофе не поднимет производительность, зато привыкание вызовет.

1. Для того, чтобы понимать, как производится та или иная атака/взлом - нужно очень хорошо понимать, как работает и устроен тот или иной продукт, какие процессы происходят внутри него.
В первую очередь, конечно же, следует тщательно разобраться с устройством сети(как работает интернет, что такое пакет, протоколы, из чего они состоят, dns и тд). Как работает фаервол, для чего он нужен и т.д. Также крайне советовал бы научиться основам системного администрирования. А также стать более-менее уверенным пользователем unix-like систем. (сложные команды можно подсмотреть в гугле), но перемещение, логи, отслеживание состояния системы, правила для фаервола - помнить, понимать и уметь использовать.

2. После этого посмотреть в сторону sql или других БД, как они работают, какие можно допустить ошибки. XSS уязвимости.
Понять, что такое утечка памяти и из-за чего она возникает.

2.1 Методы шифрования, обмен ключами, длина ключа, шифры. Что такое VPN и т.д.

3. Чтобы всё это было не скучно, предлагаю Вам участвовать в CTF, которые проходят во всем мире с завидной регулярностью.
Следить можно здесь, например: https://vk.com/invulnerble

Также можете попробовать потренироваться самостоятельно, для этого есть тестовые кейсы, например: OWASP
https://www.owasp.org/index.php/Main_Page

ОСТОРОЖНО! СПОЙЛЕРЫ!:(а точнее разбор заданий)
https://habrahabr.ru/post/250551/

4. Также материалы по безопасности и ресурсы для обучения периодически добавляю здесь: https://github.com/lgg/studying/tree/master/security

upd:
Как идет ДДос атака?
Собственно изучив первый пункт, Вы найдете ответ.

Как крадут фотки из айклауда?
Изучают систему, как она устроена, после этого находят уязвимость. Например, надо понимать, каким образом работает авторизация/аутентификация, проверка прав пользователя на то или иное действие, принадлежность файла тому или иному пользователю. Понимая, как это работает - можно додумать, где возможно программистом была допущена ошибка.

Как пишутся программы для подбора паролей
Зависит от шифрования. Есть брутфорс, радужные таблицы и много других. Опять таки, когда Вы дойдете до методов шифрования, то тоже ответите на этот вопрос.

Событие connect на клиенте происходит каждый раз код он подключается к серверу.
Когда вы перезапускаете сервер происходит разрыв соединения, а потом снова connect.
Вы каждый раз при connect-е вешаете socket.on('news'... - этого делать не надо.

var socket = require('socket.io-client')('http://localhost:3000');

socket.on('connect', function() {
  console.log('connected to server');
});

socket.on('news', function (data) {
  console.log(data);
  socket.emit('my other event', { my: 'data' });
});

Спрайты - это background. Background - это оформление, а не контент. Ваши товары - это контент.
Как потом в поиске ваши товары отображаться будут, или гугл должен будет их нарезать?
Хотите ускорить работу - грузите картинки на cdn, а не занимайтесь извращениями.

На большинстве (всех?) современных ОС получение времени - это функция ядра. Следовательно для пользовательского процесса в userspace это требует ровно один вызов в ядро, который представляет собой syscall, то есть программное прерывание. На стороне ядра код обычно тривиальный и заключается в получении значения переменной, в которой хранится время (эта переменная инкрементируется из обработчика прерывания таймера), и возврате этого значения через sysret, то есть возврат из прерывания. Поэтому основные временные затраты сводятся к исполнению syscall/sysret и сохранению/восстановлению контекста пользовательского процесса при входе/выходе в/из ядра.
От единиц измерения (нано/мирко/милли) скорость вызова практически не зависит. Конвертация одних единиц в другие происходит на стороне пользовательского процесса, за это отвечают библиотеки и окружение конкретного языка, но эти вычисления составляют всего несколько машинных инструкций и не вносят значительный вклад общее время вызова.

В Linux существуют несколько таймеров в ядре: высокого/обычного разрешения и переводимые/непереводимые назад, но получение времени происходит через одну функцию clock_gettime как бы по-разному это не выглядело в разных ЯВУ.

В Windows стандартные механизмы GetSystemTime и GetTickCount выдают время только с миллисекундной точностью. А таймер высокого разрешения QueryPerformanceCounter предназначен только для измерения временных интервалов, его абсолютное значение не имеет смысла.

Историческая справка: В реальном режиме работы x86 до тех пор, пока BIOS владеет аппаратным прерыванием таймера и таймер настроен по умолчанию (его еще можно перенастраивать), то есть с интервалом в 55ms и частотой в 18.2 герц, на каждый тик таймера инкрементируется четырехбайтное значение по абсолютному адресу 0:046C. Так что пользовательская программа (термин процесс тут не совсем применим) может получить значение времени мгновенно простым считыванием этого значения из памяти без каких-либо вызовов.
Стоит отметить, что данный функционал не имеет никакого отношения к DOS или какой-либо ОС вообще, а прошит в BIOS любого x86-совместимого (даже современного) компьютера и действителен каждый раз при загрузке машины вплоть до момента перевода процессора в защищенный режим в момент загрузки ядра современной ОС.

Array.from(
   document.getElementsByTagName("table")[1]
       .getElementsByTagName("tr"))
           .forEach(function(item) {
               console.log(item.getElementsByTagName("td")[0].textContent+ "-" + item.getElementsByTagName("td")[1].textContent);
            }
);

https://jsfiddle.net/yjrw2zvt/

<input type="checkbox" class="checkbox" name="id1"/> 1
<input type="checkbox" class="checkbox" name="id2"/> 2
<input type="checkbox" class="checkbox" name="id3"/> 3

$('.checkbox').change(function(){
		var data = [];
    $('.checkbox').each(function(){
        if( $(this).is(':checked') ){
           data.push( $(this).attr('name'));
        }
    });
    console.log(data);
});

Одна логическая ошибка в коде точно есть. Объясню ее на примере.

function setHandler(el){

   var obj = new MyController(el);

  $(el).on("click", function hand(){
      alert(obj.name);
  });

}

setHandler(element1);
setHandler(element2);

После выполнения данного кода в память браузера попадают:

• Функция setHandler
  
• Два объекта типа MyController
  
• Две функции hand - обработчики события onclick.
  

Да-да, для каждого вызова setHandler создается своя функция hand. Две (три, десять или даже миллион) разные функции с одинаковым телом. Все, что их отличает - область видимости, в которой они объявлены (к примеру, внутри каждой из них доступен свой obj).

Но, спрашивается, как мы можем оптимизировать потребление памяти в данной ситуации? А вот так:

function hand(){

  var obj = $(this).data("obj");

  alert(obj.name);

}

function setHandler(el){

   var obj = new MyController(el);

  $(el)
    .data("obj", obj) //Как вариант
    .on("click", hand)
  ;

}

setHandler(element1);
setHandler(element2);

Вынесем hand в более высокую область видимости.

Теперь в памяти сохранены:

• Функция setHandler
  
• Функция hand
  
• Два объекта MyController
  

Комментарии в коде бесполезные, только глаза мозолят:

index: function (settings) {
    // Метод контроллера index
....
create: function (settings) {
    // Метод контроллера create
....

Если уж вы описываете свой код - делайте это с умом, посмотрите какие есть средства для генерации документации, например JSDoc

Используйте фигурные скобки и отступы везде, где только можно. Я, разумеется, понимаю, что "стильно модно молодежно" писать if в одну строку, но такого рода конструкции взрывают мозг:

....
else data = settings;
if (typeof data !== "string") data = $.param(data);
if (method == 'post') return $.post(url, data + '&_method=' + method_hidden);
else return $.get(url, data);
....

И, если еще придираться, - пустые строки после объявления переменных, после if/else, и.т.д. улучшают читабельность.

Не используйте ключевые слова из es6 где попало:
class: '.jsgrid-container',

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

Да, и киньте ссылку на codepen что-ли, а то в 500 строк кода ни разу не понятно работает ли там что-то (и что оно вообще делает). И к этому хочется добавить - посмотрите в сторону систем сборки (Grunt/Gulp/...)на ваш вкус - скорее всего эти 500 строк можно разбить на части поменьше, станет проще ориентироваться в происходящем.

Коротко
Карта развития Web Разработчика

Демагогия
Не переживайте, не все сразу. Есть вещи до которых можно дойти только опытом и практикой. Это касается всех программистов в целом. Касательно веба, тут очень много упирается в то, каким именно специалистом вы хотите себя видеть в будущем. Есть фулстак - когда человек знает большую часть технологий их связку, но всегда будет ощущать недостаток тонкостей на хай левеле. В то же время специалист заточенный под определенные задачи будет лучше фулстака, но так же будет нуждаться в том же фулстаке, что бы объеденить.

Живой пример: Есть толковый фронтендер(или бекендер по JS) пишет морду сайта на JS Фреймворке. Есть гуру бэкенда пишет API сайта. В случае с фулстаком(образно) он пишет обе задачи сам, но заведомо понятно, что он пишет это дольше и не факт что по последнему слову будет сделано.

Что нужно для развития дальше:
- Читайте блоги зарубежных программистов, они делают отличные архитектуры как в самом коде, так и решения в DB.
- Фреймворки PHP и JS - чем больше их будет тем лучше. Все они ускоряют разработку. Все чаты, соц авторизации, регистрации,и прочие первоочередные задачи давно уже написаны. Вы можете концентрироваться на более важных задачах.
- ООП тут очень спорный вопрос, на определенных этапах разработки оно решает, но когда этот уровень появляется, чаще всего прибегают к другому языку программирования и переписывают проект в угоду скорости (С++, Java, Python). Понимать нужно, поскольку фреймворки построены на этих парадигмах, но самостоятельно придумывать вам гибкие решения вряд ли придется(по крайней мере до Senior-а точно).
- Не изобретайте велосипеды. Разбирайтесь в чужом коде(Этот навык очень ценен после "решить/найти решение любую задачу"). Любой магазин чаще всего будет написан в лучшем случае на фреймворке, в худшем на OpenCart, Woedpress - что просто идиотизм, это блоговая система БЛОГОВАЯ. из за тренда выкручивают яйца.
- Учить английский и работать не на СНГ, Укр или места постсоветского пространства. Искать фирмы зарубежных филиалов и работать там. Поскольку так или иначе там уже работают профессионалы и знакомы с западным рынком, европейским. Там пишутся интересные проекты и появляются интересные решения.

Я, конечно, код вам расписывать не буду здесь, но смысл очень простой. Там стоит по скроллу раздавание классов. То есть, опускаемся на 50 пикселей, получаем дополнительный класс на меню, у которого стоит изменение бэкграуна. Потом просто добавляются и убираются активные классы элементам меню (в зависимости от того, насколько вниз опустилась страница). На каждом дополнительном классе стоит свой css.

jQuery(document).ready(function() {
    jQuery("#scrollup").mouseover(function() {
        jQuery(this).animate({
            opacity: .65
        }, 100)
    }).mouseout(function() {
        jQuery(this).animate({
            opacity: 1
        }, 100)
    }).click(function() {
        $("html, body").animate({
            scrollTop: "0px"
        });
        return !1
    });
    jQuery(window).scroll(function() {
        0 < jQuery(document).scrollTop() ? jQuery("#scrollup").fadeIn("slow") : jQuery("#scrollup").fadeOut("slow")
    })
});

#scrollup {
    position: fixed;
    width: 35px;
    height: 35px;
    right: 20px;
    bottom: 40px;
    display: none;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: -3px -76px;
background-image: url('data:image/png;base64....)

Это пример плавного появления кнопки наверх, когда нужно. Здесь все реализовано по такому же принципу для классов меню. У самого меню изначально стоит фиксированная позиция, и ей просто добавляется дополнительный класс, у которого изменяется фон.