Основы JavaScript
Это была насыщенная неделя, но моя префронтальная кора любит вызовы. Я вижу преимущества использования Test-Driven Development в каждом написанном коде, это не только обеспечивает предполагаемую функциональность кода, но также позволяет лучше понять концепции.
Рекурсия
Это интересная концепция для понимания, она становится яснее и понятнее, когда объясняется в контексте ее функции в стеке вызовов и различиях между глобальным и локальным выполнением.
В рекурсии несколько вызовов могут накапливаться в стеке вызовов, который работает по принципу «последним пришел — первым обслужен» (LIFO) и ожидает выполнения базового случая, после чего предыдущие вызовы могут оцениваться и разрешаться.
Базовый случай + рекурсивный шаг + рекурсивный вызов.
// Recursively adding numbers from 1 to num function sum (num) { if (num === 1) return 1; // base case return num + sum(num - 1); // recursion };
Объектно-ориентированное программирование (ООП)
Мы начали с построения фабричной функции с помощью TDD и завершили спринт по кодированию структур данных — стеков и очередей.
Принципы объектно-ориентированного программирования (ООП) в JavaScript:
- Абстракция: сокрытие деталей реализации и предоставление пользователю только необходимой информации.
- Инкапсуляция: обертывание данных и поведения внутри объекта для защиты его состояния от внешнего вмешательства.
- Наследование: создание новых объектов на основе существующих объектов, которые могут наследовать свойства и поведение.
- Полиморфизм: позволяет объектам принимать множество форм, например, один метод имеет несколько реализаций в зависимости от контекста.
ООП использует тот факт, что объекты в JavaScript могут хранить данные в свойствах и «поведение» в виде методов/функций.
Если мы хотим создать множество объектов с одним и тем же базовым планом, мы можем создать фабричную функцию. Эта функция может возвращать новый объект при каждом вызове, причем каждый из них инициализируется одним и тем же шаблоном.
Это ключевое слово: представляет контекст функции. Всякий раз, когда функция вызывается как метод объекта, this внутри нее неявно связывается с любым объектом, вызывающим функцию (то есть с объектом слева от точки).
Пример заводской функции:
function factoryFn(name) { const newUser = {} newUser.username = name; newUser.basket = []; } fuction addToBasket(item) { this.basket.push(item) } const mandy = createUser("Mandy") mandy.addToBasket('pear') // adds pear to basket
mandy является экземпляром factoryFn и владельцем функции addToBasket, поэтому любое вхождение this в этой функции действует как заполнитель для объекта mandy.
Прототипы
Итак, в приведенном выше примере мы видим, что функция addToBasket() просто плавает в пустоте, поэтому для ее инкапсуляции мы можем использовать прототип, свойство объекта, которое позволяет вам совместно использовать свойства и методы среди разных экземпляров одного и того же объекта. объект.
const userPrototype = { addToBasket: fuction (item) { this.basket.push(item) } deleteLastItem: function () { this.basket.pop() } } function newUser(name) { const newUser = Object.create(userPrototype) newUser.username = name; newUser.basket = []; } const mandy = newUser('Mandy') mandy.addToBasket('pear') mandy.deleteLastItem() // mandy.basket would return []
В прототипе объекта с именем userPrototype объявлены методы, которые являются общими для всех экземпляров фабричных функций.
Чтобы назначить это как прототип объекта для наших фабричных функций, мы будем использовать метод Object.create
.
Но затем входит в класс…
Сорт
Классы — это синтаксический сахар, который абстрагирует все дни 2 и 3. Когда мы создаем класс, мы также создаем внутри него конструктор, который представляет собой метод, который вызывается при создании экземпляра класса с помощью оператора «новый».
class User { constructor(name) { this.name = name; this.online = false } greet() { console.log('Hello', this.name) } } const user1 = new User('Mandy') user1.greet() // outputs 'Hello Mandy'
Итак, теперь у нас есть наша «фабричная функция» и прототип в классе, а user1 — это экземпляр этого класса, который имеет все свойства и методы из этого класса.
Классы также могут наследовать и расширяться от других классов.
Получить набор
Геттер — это метод, используемый для получения значения свойства объекта, а сеттер — это метод, используемый для изменения значения свойства объекта.
class Person { constructor(name) { this._name = name; } get name() { return this._name; } set name(newName) { this._name = newName; } } const person = new Person("John"); console.log(person.name); // outputs "John" person.name = "Jane"; console.log(person.name); // outputs "Jane"
Мы можем создавать закрытые поля, к которым нельзя получить доступ за пределами объявления класса, используя # имя.
class TimeSheet { #hoursWorked = 0; #hourlyRate; #shiftLength = 8; constructor(name, hourlyRate) { this.name = name; this.#hourlyRate = hourlyRate; } } davidsTimeSheet.name; // "David" - public field davidsTimeSheet.hoursWorked; // undefined - private field
Ссылки на неделю
Я больше склонен к визуальному/чтению, поэтому я обнаружил, что обращение к учебникам помогло мне понять, как работает ООП на низком уровне.
Эмоциональная/лимбическая регистрация 👁🩸
К концу этой недели я страдал от нечеткости зрения, поэтому я повернул свой стол лицом к окну, чтобы использовать правило 20–20–20 (каждые 20 минут смотрите на что-то на расстоянии 20 футов в течение 20 секунд).
Спринт в игре про покемонов был забавным, но я был в паре с кем-то, кто не собирался становиться разработчиком программного обеспечения или изучать JS, поэтому в итоге мы получили спагетти-код. Я выскользнул из пары и потратил приличное количество времени на распутывание беспорядка, но в конце концов смог реализовать игру.
Я действительно ценю сложность видеоигр. В настоящее время я играю в Cyberpunk 2077 и постоянно вникаю в мыслительные процессы, лежащие в основе механики, стремясь понять логику, которая легла в основу ее создания.
computerSci.concat(biologySci) 🔗
Изучение объектно-ориентированного программирования заставило меня задуматься о том, являются ли люди просто экземплярами класса Homo Sapiens, разделяющими схожий опыт, но применяющими наши «методы» по-разному.
Мы все произошли от одной и той же прототипной эукариотической клетки и в конечном итоге разделились на различные таксономические категории.
Это можно наблюдать у наших близких родственников, шимпанзе, с которыми мы разделяем сходство ДНК на 98,7% в результате расхождения/полиморфезима на 1,3%, которое произошло, когда наш вид произошел от общего предка (наследственность).
Просто философская аналогия, помогающая мне понять концепцию, или, возможно, также подчеркивающая сходство в структуре и поведении между цифровой и физической сферами.
Прыжок во времени
- Неделя 1: Командная строка, Git и GitHub, основы JavaScript и введение в HTML/CSS
- Неделя 2: Node.js, NPM, разработка через тестирование, парное программирование и замыкание
- 3 неделя 👀
- Неделя 4: День обзора, асинхронные обратные вызовы, Интернет и обещания
- Неделя 5: HTTP, Express, Model-View-Controller (MVC) Pattern & SQL
- Неделя 6: Node Postgres, супертест и обработка ошибок с помощью Express
- Неделя 7: Бэкенд-проект, Async Await и CICD
- Неделя 8: DOM, React-компоненты, состояние и хуки
- Неделя 9: Вызовы API, React — Router, контекст и оптимистичный рендеринг
- Неделя 10: Фронтенд-проект, обработка ошибок, пользовательские хуки и классовые компоненты