Подводный мира JavaScript
Изучая Javascript по книге автора Марейн Хавербек Выразительный Javascript я наткнулся на три забавные ассоциации. Идея мне понравилась, и я решил визуализировать другие термины, вызывающие трудности восприятия.
INDEX
Привязки — щупальца осьминога
Привязки (let, const) лучше представлять себе не как коробки, а как щупальца: привязки не содержат значения, а захватывают их. Две привязки могут ссылаться на одно и то же значение. Программа имеет доступ только к тем значениям, на которые есть ссылки. Если нужно что-то запомнить, отращиваем «щупальце», чтобы удерживать это, или захватываем его одним из уже существующих щупалец.
Когда мы создаем привязку, не давая ей значения, щупальцу нечего схватить и оно повисает в воздухе. Если вы попробуете узнать значение пустой привязки, то получите значение undefined.
Привязки свойств аналогичны. Они захватывают значения, но другие привязки и свойства могут удерживать те же значения.
Объекты — осьминоги с произвольным количеством щупалец
Объект можно представить себе как осьминога с произвольным количеством щупалец, на каждом из которых вытатуировано имя. Оператор delete отсекает щупальце такого осьминога. Это унарный оператор. Будучи примененным к свойству объекта, он удаляет из объекта данное именованное свойство. Такое встречается нечасто, но это возможно.
Массивы - тоже осьминоги, но другие
Массивы это особые объекты для хранения последовательностей. Если объект — это осьминог, то массив — это дисциплинированный осьминог с идеально упорядоченными щупальцами!
Итак, массивы - это длинные плоские осьминоги, у которых все щупальца выстроились в аккуратный ряд и каждое щупальце помечено цифрой. Такая цифра есть index (т.е. местоположение элемента в массиве).
Свойства - именованные связи внутри объекта
Татуировки на щупальцах осьминога — это имена свойств объектов.
Почему это свойства?
- У каждого "щупальца" осьминога есть татуировка, которая, по сути, обозначает ключ свойства объекта.
- Эти свойства связывают ключ (татуировку) с соответствующим значением (чем-то, что осьминог может "держать").
- В отличие от привязок, которые в аналогии представлены как сами щупальца, свойства — это именованные связи внутри объекта.
Отличие татуировок от привязок
1: Привязки (щупальца) удерживают значения, к которым они обращаются. Это просто связь между именем и значением в программе. Например:
let a = 10; // Привязка "a" захватывает значение 10
let b = a; // Привязка "b" захватывает то же значение
let octopus = {
arm1: "pearls",
arm2: "gold",
};
console.log(octopus.arm1); // "pearls" — осьминог удерживает жемчуг на щупальце arm1
Здесь:
- arm1 и arm2 — "татуировки", т.е. имена свойств.
- "pearls" и "gold" — значения, которые удерживают щупальца.
Расширим подводную аналогию:
1: Если татуировки (имена свойств) стереть с щупальца с помощью оператора delete, осьминог теряет это щупальце:
delete octopus.arm1; // Щупальце с татуировкой "arm1" исчезает
2: Массивы — это осьминоги, у которых все щупальца расположены в строгом порядке, а вместо имён — пронумерованные метки (индексы):
let arrayOctopus = ["seaweed", "coral", "fish"];
console.log(arrayOctopus[1]); // "coral" — доступ по номеру щупальца
3: Если осьминог (объект) растёт, он может отрастить новые щупальца и добавить новые татуировки:
let arrayOctopus = ["seaweed", "coral", "fish"];
console.log(arrayOctopus[1]); // "coral" — доступ по номеру щупальца
octopus.arm3 = "diamonds"; // новое "щупальце" с именем arm3
Функции — подводные лодки
Функции можно представить как подводные лодки, которые выполняют различные миссии под водой. Когда мы "запускаем" функцию, это похоже на отправку лодки в плавание: мы задаём курс (параметры) и ожидаем результат (место назначения или выполненное действие).
Как это работает:
- Имя функции — это название лодки (например, explorerSubmarine).
- Параметры функции — это инструкции для лодки, например, "погрузиться на глубину 50 метров".
- Результат функции — это данные или действие, которые лодка приносит обратно, например, найденный затонувший корабль.
Пример функции:
function exploreUnderwater(depth) {
if (depth < 50) {
return "Коралловый риф";
} else if (depth < 100) {
return "Подводная пещера";
} else {
return "Глубоководный вулкан";
}
}
console.log(exploreUnderwater(60)); // "Подводная пещера"
В данном примере функция exploreUnderwater — это подводная лодка, которая погружается на указанную глубину и возвращает информацию о том, что она обнаружила.
Методы — трюки осьминога
Методы — это особые действия, которые осьминог может выполнять с помощью своих щупалец. Если свойства осьминога — это "чем он владеет", то методы — это "что он может сделать". Например, осьминог может сжимать жемчужину, махать щупальцем или прятать сокровища.
Как это работает:
- Метод — это функция, привязанная к объекту.
- Вызывая метод, осьминог выполняет действие, используя свои ресурсы (свойства).
- Методы могут изменять свойства осьминога или взаимодействовать с другими объектами подводного мира.
Пример метода:
let octopus = {
arm1: "жемчуг",
arm2: "золото",
hideTreasure: function() {
console.log("Сокровище спрятано!");
}
};
octopus.hideTreasure(); // "Сокровище спрятано!"
Здесь метод hideTreasure — это трюк, который осьминог может выполнить. Когда вы вызываете его, осьминог выполняет запрограммированное действие (в данном случае вывод сообщения в консоль).
Методы, которые взаимодействуют со свойствами:
let octopus = {
treasure: "жемчуг",
changeTreasure: function(newTreasure) {
this.treasure = newTreasure;
console.log("Новое сокровище: " + this.treasure);
}
};
octopus.changeTreasure("золото"); // "Новое сокровище: золото"
В этом примере метод changeTreasure изменяет свойство treasure осьминога. Таким образом, осьминог может обновлять то, что он держит в своих щупальцах.
Значения — жемчужины и сокровища
Значения в JavaScript можно представить как жемчужины или сокровища подводного мира. Это то, что можно хранить, передавать или использовать для выполнения задач. Каждое значение обладает определенной "стоимостью" и может быть использовано осьминогом или черепахой-гидом.
Типы значений:
- Примитивы — простые и неизменные сокровища, такие как числа (42) или строки ("жемчуг").
- Объекты — сундуки, в которых хранятся другие сокровища, упорядоченные с помощью свойств.
Примеры значений:
// Примитивные значения
let pearl = "жемчуг";
let gold = 100;
// Объектное значение
let treasureChest = {
item1: "жемчуг",
item2: "золото"
};
Здесь pearl и gold — это примитивные сокровища, которые можно просто использовать или передать. А treasureChest — это сундук, где сокровища организованы в виде свойств.
Передача значений:
Когда вы передаете значение функции или привязываете его к переменной, это похоже на передачу жемчужины от одного осьминога другому.
function showTreasure(treasure) {
console.log("Сокровище: " + treasure);
}
showTreasure("жемчуг"); // "Сокровище: жемчуг"
Здесь значение "жемчуг" передается функции showTreasure, и она сообщает нам, какое сокровище ей передали.
Сравнение значений:
Иногда нужно узнать, равны ли два значения. Например, осьминог может спросить: "Держу ли я ту же жемчужину, что и черепаха?"
let pearl1 = "жемчуг";
let pearl2 = "жемчуг";
console.log(pearl1 === pearl2); // true — это одно и то же значение
Значения можно сравнивать, объединять или передавать, как если бы это были настоящие сокровища подводного мира.
18.11.24 ©️ Yarve (Jaroslav Plotnikov) All articles.