HOME | CONTACT | BLOG | GLOSSARY | EMAIL-LIST

HOME | BLOG | EMAIL-LIST

CONTACT | VIDEOS | FAQ | GLOSSARY

Jaroslav (Yarve) Plotnikov


Подводный мира JavaScript

Изучая Javascript по книге автора Марейн Хавербек Выразительный Javascript я наткнулся на три забавные ассоциации. Идея мне понравилась, и я решил визуализировать другие термины, вызывающие трудности восприятия.

Ярослав Плотников, Ярве, Jaroslav Plotnikov, Yaroslav Plotnikov, Yarve, diving red sea,hurgada
Фото 1. вперед (точнее, вглубь), на изучение JavaScript (Source: Jaroslav Plotnikov)

INDEX

Привязки — щупальца осьминога

Привязки (let, const) лучше представлять себе не как коробки, а как щупальца: привязки не содержат значения, а захватывают их. Две привязки могут ссылаться на одно и то же значение. Программа имеет доступ только к тем значениям, на которые есть ссылки. Если нужно что-то запомнить, отращиваем «щупальце», чтобы удерживать это, или захватываем его одним из уже существующих щупалец.

Когда мы создаем привязку, не давая ей значения, щупальцу нечего схватить и оно повисает в воздухе. Если вы попробуете узнать значение пустой привязки, то получите значение undefined.

Привязки свойств аналогичны. Они захватывают значения, но другие привязки и свойства могут удерживать те же значения.

Объекты — осьминоги с произвольным количеством щупалец

Объект можно представить себе как осьминога с произвольным количеством щупалец, на каждом из которых вытатуировано имя. Оператор delete отсекает щупальце такого осьминога. Это унарный оператор. Будучи примененным к свойству объекта, он удаляет из объекта данное именованное свойство. Такое встречается нечасто, но это возможно.

Массивы - тоже осьминоги, но другие

Массивы это особые объекты для хранения последовательностей. Если объект — это осьминог, то массив — это дисциплинированный осьминог с идеально упорядоченными щупальцами!

Итак, массивы - это длинные плоские осьминоги, у которых все щупальца выстроились в аккуратный ряд и каждое щупальце помечено цифрой. Такая цифра есть index (т.е. местоположение элемента в массиве).

Свойства - именованные связи внутри объекта

Татуировки на щупальцах осьминога — это имена свойств объектов.

Почему это свойства?

  • У каждого "щупальца" осьминога есть татуировка, которая, по сути, обозначает ключ свойства объекта.
  • Эти свойства связывают ключ (татуировку) с соответствующим значением (чем-то, что осьминог может "держать").
  • В отличие от привязок, которые в аналогии представлены как сами щупальца, свойства — это именованные связи внутри объекта.

Отличие татуировок от привязок

1: Привязки (щупальца) удерживают значения, к которым они обращаются. Это просто связь между именем и значением в программе. Например:

let a = 10; // Привязка "a" захватывает значение 10
let b = a; // Привязка "b" захватывает то же значение

2: Свойства (татуировки на щупальцах) принадлежат объектам и позволяют осьминогу (объекту) организовать свои данные. Например:

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.

Copy & share: jaroslavplotnikov.com/jssea

Your THOUGHTS?

Please leave a reply: