Создание рукавицы бесконечности Таноса с помощью объектов JavaScript

В этой статье я расскажу об объектах JavaScript, свойствах и методах. Мы будем создавать потрясающую перчатку бесконечности, которую носит Танос, используя объекты JavaScript. Что может быть лучше объяснения, чем разговор о перчатке бесконечности?

Недавно я смотрел Avengers Infinity Wars, и я должен сказать, что был полностью потрясен Таносом. Он такой крутой.

Он фиолетовый инопланетянин размером с Халка, но гораздо более спокойный и умный. Он выбил дерьмо из Халка, даже не используя камень бесконечности!

Если вы еще не смотрели фильм, вам обязательно стоит посмотреть его для Таноса (его играет Джош Бролин, который также играл Кейбла в «Дэдпуле 2» и молодого агента К в «Людях в черном 3»).

Хорошо, хватит фильмов, мы будем использовать объекты JavaScript, чтобы построить его могучую перчатку. Если вы все еще боретесь с объектами, я бы посоветовал вам взглянуть на мою другую статью Объекты JavaScript, быстро объясненные, чтобы быстро освежиться.

Свойства и методы

Вы, должно быть, слышали, что эти два слова время от времени отбрасываются. Что, если бы я сказал вам, что это просто еще одно причудливое слово для данных и функций?

Давайте создадим Infinity Gauntlet как объект JS:

const infinityGauntlet = {}

Перчатка содержит 6 камней бесконечности, которые питают ее.

Давайте добавим предмет в объект:

const infinityGauntlet = {
  powerStone: 'Controls all of the power in the universe. It can be used to augment or inhibit any force.'
}

Итак, теперь у меня есть свойство под названием powerStone со значением text / String.

Если я наберу infinityGaunlet.powerStone в инструментах разработчика, я увижу следующий результат:

Это называется собственностью. Свойством может быть что угодно: текст, число, логическое значение или даже другой объект.

В JavaScript мы набираем object.nameOfTheProperty, чтобы получить доступ к значению свойства.

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

Помнить,

Свойство предназначено для хранения данных об объекте.

Метод - это действие, оно что-то делает для объекта.

Давайте создадим функцию, которая будет использовать силу этого камня.

Мы можем написать такую функцию:

const infinityGauntlet = {
  powerStone: 'purple',
  usePowerStone: function() {
    return 'Using super strength to crush the moon and throw it over to the Avengers!!';
    }
}

В ES6 мы можем упростить написание методов.

Итак, вместо этого:

usePowerStone: function() {
    return 'Using super strength to crush the moon and throw it over to the Avengers!!';
    }

Мы можем просто написать это:

usePowerStone() {
  return 'Using super strength to crush the moon and throw it over to the Avengers!!';
}

Если я наберу infinityGauntlet.usePowerStone(), мы получим результат:

Вы должны ввести object.methodName(), чтобы запустить метод, который находится внутри объекта.

Итак, Перчатка Бесконечности - это желтая перчатка. Это не идет с камнями. Вы должны собирать эти камни по одному.

Поскольку у нас есть 6 камней, и все они будут иметь информацию и могут выполнять некоторые действия, почему бы не поместить эти шесть камней как свои собственные объекты. (Подсказка: вы можете добавлять объекты как свойства) Так будет проще управлять:

const infinityGauntlet = {
  powerStone: {},
  spaceStone: {},
  realityStone: {},
  mindStone: {},
  soulStone: {},
  timeStone: {}
}

Для простоты поработаем одним камнем:

Наличие каждого камня дает вам особую силу. Это означает, что вы можете использовать силу только тогда, когда у вас есть этот камень.

Давайте создадим новое свойство для удерживания камня. Мы можем сделать его логическим значением.

const infinityGauntlet = {
  spaceStone: {
    equipped: false
  }
}

Я создал новое свойство под названием equipped, где false означает, что в нем нет камня.

Давайте создадим свойство info, в котором будет храниться некоторая информация об этом камне:

spaceStone: {
  equipped: false,
  info: 'Limitless manipulation of space, allowing for teleportation, dimensional manipulation, creation of wormholes, etc.'
}

Наконец, давайте создадим метод, чтобы мы могли использовать камень:

use() {
  return 'Do something';
}

Но нам нужно проверить, есть ли у нас камень!

Итак, я могу сделать это:

use() {
  if(this.equipped) {
    return 'Create a wormhole and transport from planet Titan to Wakanda in a minute!';
  } else {
    return 'No space stone!'
  }
}

this.equipped проверит, есть ли камень в его собственном владении equipped. Если у нас есть камень, мы призовем силу, иначе он не сработает.

Полный код пока выглядит так:

Итак, теперь, когда у нас нет камня, (false) он выведет это:

Но когда мы соберем камень (правда), он выведет это сообщение об успехе:

Теперь я продолжу и завершу все остальные камни, поскольку все они имеют одинаковые свойства и методы:

Помимо 6 объектов для перчаток, я также дал ему один дополнительный метод snapFinger

Когда у вас есть все шесть камней бесконечности, вы можете щелкнуть пальцем, чтобы ощутить еще больший хаос.

snapFinger() {
  if(this.powerStone.equipped &&
    this.spaceStone.equipped &&
    this.realityStone.equipped &&
    this.mindStone.equipped &&
    this.soulStone.equipped &&
    this.timeStone.equipped) {
 
 return 'Destroyed half of the population in the universe!'
} else {
 
 return 'You need all the stones to perform this action!'
  }
}

Он активируется только тогда, когда присутствуют все камни. Поэтому я просто использую оператор && AND, чтобы проверить, есть ли в перчатке все камни.

Итак, об этом в этой статье. Можете ли вы расширить перчатку с помощью более интересных функций? Не стесняйтесь и дайте мне знать !!

Считаете этот пост полезным? Пожалуйста, дайте ему ХОЗЯЙСТВО!

Хотите узнать больше о JavaScript и Node JS? Посетите мой блог ›› TamalWeb.com

Создание рукавицы бесконечности Таноса с помощью объектов JavaScript

Вопросы по теме