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

Таким образом, этот пост короткий и лаконичный, в нем рассматриваются некоторые концепции, связанные с объектно-ориентированным программированием в JavaScript, и всеми любимый синтаксис «новой стрелки» (также известный как толстые стрелки). Как всегда, включено больше ссылок на сторонние ресурсы, которые углубляются!

Зачем изучать объектно-ориентированное программирование?

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

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

Случай использования новой стрелки =› синтаксиса функции

Синтаксис новой стрелки (иногда называемой толстой стрелкой) полезен, поскольку позволяет нам писать более короткие функции.

ДО: hello = function(){ return «Привет, друзья!»};

ПОСЛЕ: привет = () =› {return «привет, друзья!»};

Но что еще более примечательно, новый синтаксис стрелочной функции работает с «этим» по-другому. Со стрелочными функциями нет привязки «это».

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

Приведенное выше объяснение основано на Школах W3.

Классический вопрос на собеседовании: объясните разницу в использовании foo между function foo() {} и const foo = function() {}

А) Функция foo(){}

Б) Константа foo = функция (){}

A: оператор функции поднимается наверх.

B: с помощью const мы можем объявить переменную (foo), а const дает ей блочную область видимости, которая останавливает полный подъем наверх и гарантирует, что ее нельзя будет повторно объявить.

Какие преимущества дает использование синтаксиса стрелки для метода в конструкторе?

Для объектно-ориентированного программирования синтаксис стрелки имеет решающее значение. При использовании стрелочных функций новая функция не определяет свое собственное значение «это». Используя стрелочные функции, «это» привязывается к вновь созданному объекту и, следовательно, приводит к более чистому коду и большей ремонтопригодности в объектно-ориентированном программировании.

Что такое деструктурирование объекта или массива?

Деструктуризация в JavaScript позволяет нам извлекать данные из массивов, объектов, карт и наборов в их собственные переменные. Это позволяет нам извлекать свойства из объекта или элементов из массива (или нескольких одновременно). Вместо создания нескольких переменных мы деструктурируем их в одну строку кода.

Пример:

Const user = {первый: «Рэйчел», последний: «Смит», округ: «Трэвис», город: «Остин»};

Const {первый, последний} = пользователь;

Документация и примеры: https://wesbos.com/destructuring-objects

Что такое закрытие и как мы можем его использовать?

Замыкание дает доступ к области видимости внешней функции из внутренней функции. В JavaScript замыкания создаются каждый раз, когда создается функция, во время создания функции. Это означает, что когда мы проводим модульное тестирование в node.js, то, если мы правильно пишем тесты, замыкания могут помочь. Потому что, по сути, замыкание — это назначенная функция (или, в случае модульного тестирования, возвращаемая как значение) и связанная с ней область.

Полезные ресурсы по закрытию в JavaScript:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36#:~:text=To%20use%20a%20closure%2C%20define% 20внешняя%20функция%20возвращена%20.



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

Ваш друг в коде,

Рэйчел