Разбираемся, как работает метод функций bind, как происходит привязка контекста и строим свой аналог на основе метода apply

В первом выпуске React Challenge я предложил вам построить небольшое приложение на React, чтобы вы смогли прощупать библиотеку на более сложном проекте, чем, например, TODOList. Для выполнения челенджа у вас был небольшой стартовый шаблон, который отвечал за компилирование JavaScript и Sass, а также за генерирование случайных данных для приложения. Всего в первом челендже по официальным данным (количество форков на Github) приняло участие более 150 человек и многие даже довели дело до конца. Настало время во всём разобраться и подвести итоги.

Нет, ничего не изменилось, прототипы никуда не ушли, а классы лишь приятная обёртка над прототипным наследованием. В классическом понимании классов в JavaScript никогда не существовало и не будет существовать никогда. Многие разработчики, особенно те, которые решили познать мир JavaScript после изучения другого языка программирования, не понимают (или не хотят понять) разницы между классическим и прототипным наследованием, в результате чего они буквально отказываются полностью использовать самый мощный инструмент, которым только может вооружиться JavaScript-разработчик. Поэтому данная статья, в первую очередь, призвана объяснить, почему классы, появившиеся в новом стандарте языка, не то, чем кажутся на первый взгляд.

Сейчас вы на каждом шагу вы слышите: "React! Виртуальный DOM! Компоненты!". Настало время внести ясность, что это такое, как с этим жить и работать.

В первом выпуске React Challenge я предлагаю вам прощупать React и, в целом, составить для себя какое-то представление о том, что это вообще такое. В этом челендже будем разрабатывать достаточно простое приложение для поиска и сортировки данных.

Учить новую технологию всегда непросто. Ещё сложнее сделать это одному, когда нет возможности спросить совета у более опытных разработчиков или своих "товарищей по несчастью". React Challenge призван объединить всех желающих научиться использовать React и помочь освоить библиотеку на более сложных и интересных примерах, чем Hello, World! или TODOList.

Над каждым свойством любого объекта в JavaScript можно провести определённый набор манипуляций. Свойство можно записать, изменить, получить значение, а с помощью цикла for .. in или метода Object.keys перечислить все свойства объекта. Вполне стандартный набор операций для работы с объектами, к которому вы, скорее всего, уже привыкли. До релиза стандарта ES5 все эти "качества" объекта изменить было невозможно, но теперь для каждого свойства можно детально описать модель его поведения с помощью дескрипторов.

В одной из прошлых статей мы подробно рассмотрели процесс создания библиотеки для валидации данных, полученных из поля ввода. Библиотека хорошо работает и справляется со своей задачей. Тем не менее, если оценить библиотеку в более глобальном масштабе, то можно заметить, что она состоит из двух частей: валидации данных и коммуникации с DOM. В этой статье разберём процесс создания конструктора-родителя, который будет отвечать только за валидацию переданных ему данных, после чего напишем дочерний конструктор, который будет заниматься "грязной" работой: получать данные от DOM элементов, писать сообщения и запускать callback функции.

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

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

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

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

В прошлой статье мы выяснили, что не всё в JavaScript является объектом, и все данные разделяются на примитивы и объекты. В этой статье рассмотрим способы создания объектов, что такое методы, свойства, как их присваивать, способы итерации по всем свойствам объектов и использование ключевого слова this.

Скорее всего, вы читали или слышали, что всё в JavaScript является объектом. Ещё чаще можно увидеть опровержения этого утверждения. Подобные споры возникают регулярно и обусловлены в большей степени недопониманием концепций JavaScript. И, на самом деле, причина считать примитивы объектами есть — примитивы имеют свойства и методы, поведение которых во многом схоже со свойствами и методами объектов. В статье рассмотрим, чем примитивы, на самом деле, отличаются от объектов и почему это так важно.

forEach, map, filter, some, every и reduce являются ключевыми методами массивов в JavaScript, так как большая часть данных, например приходящая с сервера, в JSON формате подразумевает их использование для удобной фильтрации и преобразований. В статье будет рассмотрено применение каждого метода, а также рассмотрены способы их реализации в виде функций.

Краткие формы записи свойств и методов объектов немного сократят код и сделают его немного более читабельным относительно аналогичного кода в ES5. Тем не менее новые краткие формы записи накладывают некоторые ограчения при работе с рекурсией и передаче методов объекта в качестве callback функции.

Цикл for .. of во многом похож на метод массивов forEach, но имеет ряд преимуществ над ним. С появлением нового вида циклов отпадает необходимость использовать конструкцию [].forEach.call(elements, function(){}) для итераций по коллекции DOM элементов.

Стрелочные функции не просто "синтаксический сахар", как это может показаться на первый взгляд. Главная причина их появления в ES6 — недопонимание, которое возникает у большинства разработчиков при работе с ключевым словом this. С релизом нового стандарта отпадает необходимость писать var self = this при использовании колбэков, что в значительной степени упрощает чтение кода и понимание происходящего.

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

С выходом стандарта ES6 появилась возможность использовать строковую шаблонизацию. Новый вид строк, создаваемый с помощью символов ` поддерживает интерполяцию переменных и любых логических выражений.

Destructuring или реструктуризующее присваивание призвано существенно уменьшить количество кода, необходимого для извлечения данных из массивов и объектов. С помощью одной строчки кода теперь можно создать несколько переменных.

Параметры по умолчанию в ES6 призваны обобщить сразу несколько паттернов и существенно упростить восприятие функций.

Новый оператор ... существенно упростит работу с многими типами данных: массивами, коллекциями DOM элементов, датами и функциями.

Долгое время оператор var было единственным способом создания переменных. В статье разберем, что могут предложить новые операторы let и const, а также проблемы, с которыми можно столкнуться при их использовании.

Стандарт ECMAScript проделал огромный путь. Нет, конечно, это неправда. Вся история ES может уложиться в несколько предложений. Именно так было до релиза ES6, который кардинально изменил разработку языка JavaScript и принёс с собой огромное количество нововведений.

Перед изучением нового стандарта ES6 необходимо помнить, что многие нововведения базируются на прошлом стандарте ES5. Для полного понимания многих новых конструкций и особенностей синтаксиса ES6 необходимо знание основ JavaScript. В статье вы найдете подборку книг и несколько воспросов для проверки своей готовности изучения нового стандарта.