Изучение веб-разработки в 60 лет: объектно-ориентированное программирование и ES6

Я был довольно доволен своим прогрессом в изучении JavaScript, когда завершил несколько последних проектов по программированию в курсе Веб-разработка 101 с помощью Odin Project. Я мог перемещаться по базовому JavaScript; циклы, массивы, функции и даже базовое понимание того, что такое объект. Я мог работать с объектной моделью документа (DOM), чтобы достаточно хорошо управлять элементами HTML и CSS. Хотя я далек от эксперта, я начинаю видеть некоторые результаты своих усилий и чувствую, что готов перейти к изучению продвинутого JavaScript.

Расширенный JavaScript - испытания и невзгоды

Я приступил к открытию раздела Advanced JavaScript Complete JavaScript Course Йонаса Шмедтманна. Учебная программа включает объектно-ориентированное программирование (ООП) и ES6 или ES2015 JavaScript. Я узнал, что такое объект, ранее в курсе, но я не знал, как использовать объекты в программировании. ES6 - это более новая версия JavaScript, в которой введен новый синтаксис.

Учебная программа для углубленного изучения JavaScript

• Наследование объектов и цепочка прототипов
• Конструкторы функций
• Object.create
• Примитивы против объектов
• Функции первого класса
• Передача функций в качестве аргумента
• Функции, возвращающие функции
• Выражения немедленно вызываемой функции (IIFE)
• Закрытие
• Свяжите, позвоните и примените

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

Объектно-ориентированное программирование

Объектно-ориентированное программирование сильно отличалось от базового JavaScript, которому я только что научился. Объекты - это набор различных предметов; переменные, массивы, логические значения, функции. Сказать Все есть объект - это клише. Тем не менее, это кажется правдой. Как использовать объекты в программировании; создание и использование объектов для выполнения задачи? Сначала я посмотрел учебники на сайте W3 Schools. Я нашел их очень подходящими для новичков, поскольку они объясняли вещи простым английским языком. Я начал с того, что научился делать объект.

Объявление объекта

Использование литерала объекта - самый простой способ объявления объекта. Все идет нормально.

var person = {
name : “name”,
yearOfBirth: “year”
};

Я нашел JavaScript: понимание странных частей Тони Алисии на Udemy. Несколько веб-сайтов, изучающих JavaScript, настоятельно рекомендовали этот курс. Просматривая его, я обнаружил, что он охватывает именно те элементы, с которыми я боролся.

Курс Тони Алисии - более старый курс, последний раз обновлявшийся в 2016 году и больше не поддерживаемый инструктором, что было очень плохо. Я обнаружил, что Тони, возможно, лучший инструктор по программированию, которого я когда-либо знал. Его преднамеренная манера обучения была спокойной и ясной. Он сосредоточился на объяснении того, как JavaScript работает «изнутри». Были подробно объяснены наследование, цепочка областей видимости и прототипирование. Я потратил месяц на прохождение этого курса и стал намного лучше понимать эти концепции.

Я последовал за этим коротким видео на YouTube Брэда Трэверси Ускоренный курс объектно-ориентированного программирования. У Traversy очень серьезный и прагматичный стиль обучения. Он представил более свежую информацию об объектно-ориентированном JavaScript, включая ES6. Честно говоря, Йонас Шмедтманн также имеет очень полную презентацию ES6 в своем курсе. Теперь перейдем к концепциям функций-конструкторов и наследования.

Конструктор функций и наследование

Конструктор функции - это функция, которая создает новые объекты. Эти новые объекты наследуют свойства конструктора.

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

Вот базовый конструктор функции:

var Person = function(name, yearOfBirth){
this.name = name;
this.yearOfBirth = yearOfBirth;
}

Наследование объекта: создание нового объекта со свойствами, унаследованными от объекта-конструктора.

Var joe = new Person (‘joe’, 1990);

Новый объект с именем «joe» наследует свойства name и года рождения от метода Person.

Это избыточная номенклатура; По сути, методы - это то же самое, что и функции, и оба считаются объектами.

Хорошо, я понял. Но потом я обнаружил, что есть несколько способов сделать это. Оказывается, в JavaScript есть несколько способов создать объект.

Метод Create.object: Что за…? Это то же самое.

var joe = object.create(personProto),{
Name: {value: ‘joe’},
yearOfBirth: {value: 1990}
};

Возвращаясь к конструктору функции, к объекту также могут быть добавлены методы.

var Person = function(name, yearOfBirth){
this.name = name;
this.yearOfBirth = yearOfBirth;
this.calculateAge() = function() {
Var age = Date.getFullYear() - this.yearOfBirth;
}}

Но есть еще один способ добавить метод. Метод прототипа используется для создания функции (метода) с унаследованными свойствами. Это сохраняет функцию вне функции конструктора, но позволяет ей наследовать ее свойства.

Метод прототипа

Person.prototype.calculateAge = function(){
var age = Date.getFullYear() - this.yearOfBirth;
}

Когда я начал изучать ES6, я нашел еще один способ создавать объекты, используя классы.

Классы ES6

class Person {
constructor( name, yearOfBirth) {
this.name= name;
this.yearOfBirth= yearOfBirth;
}}
let joe =  new Person(“joe”, 1990);

Ух ты, если посчитать литерал объекта, который дает четыре способа сделать, по сути, одно и то же. Моя первая мысль была: «Зачем мне изучать все эти разные синтаксисы?» Они лишь немного отличаются, но для начинающих изучать кодирование это неприятно. Оказывается, это неважно. Что действительно важно, так это понимание наследования и прототипирования.

Синтаксический сахар и объектно-ориентированный JavaScript

И Трэверси, и Алисия упомянули термин «синтаксический сахар», определив его как другой синтаксис, который делает то же самое. И то, и другое подразумевает, что использование того или другого не дает преимущества в программировании. Оба инструктора подчеркнули важность изучения концепции прототипирования и наследования и рекомендовали сделать это перед использованием классов JavaScript ES6.

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

Итак, как можно использовать объектно-ориентированное программирование в приложениях?

Я только начинаю понимать, как приложения могут использовать объекты. Я сделал только две программы с использованием объектно-ориентированного JavaScript, но заметил, что это в основном позволяет избежать дублирования усилий, позволяя группировать свойства, а также эффективно хранить и извлекать данные. Это должно упростить работу с большим количеством объектов или данных. Конструкторы позволяют легко создавать множество объектов с похожими свойствами. Многочисленные способы изготовления предметов могут сбить с толку новичка. Я думаю, что по мере того, как я получу больше опыта в программировании и буду работать над более крупными проектами, мне станет удобнее ими пользоваться.

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

Просматривайте мои учебные заметки, пока я работаю над JavaScript 30 Веса Боса, 30 проектов за 30 дней.