Рубрики
Без рубрики

Радость прототипов

Смейте прототипы. Это мощная особенность языка и, возможно, ключ к следующему уровню. Позволять’… Помечено JavaScript, WebDev.

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

Посмотрим, почему и как предотвратить распространенные ошибки.

Отказ от ответственности

Я использую термин «методы», но вместо этого я должен использовать «свойства».

Что это?

Каждый объект в JavaScript имеет прототип, частное свойство, связанную с другим объектом.

Каждый объект наследует свойства и методы из прототипа.

Цепь прототипа

Вы можете назвать это цепочкой наследования.

В JavaScript у вас есть Объект в верхней части цепи.

Под Объект , объекты и их прототипы, и прототипы прототипов до тех пор, пока оно попадает в то, что он не поражает нулевой (конец):

Object => someObject => prototype => prototype => ... => null

Все является объектом в JavaScript. Цепь прототипа применяется повсюду, включая функции и массивы.

Вот почему вы можете использовать Сортировать или Фильтр На всех массивах напрямую. Это родная Массив прототип, который их дает.

Простой пример

function Game(elements) {
  this.elements = elements;
}

Game.prototype.shuffle = function () {
  let size = this.elements.length;
  for (let i = size - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [this.elements[i], this.elements[j]] = [this.elements[j], this.elements[i]];
  }
}

let game = new Game(["rock", "paper", "scissors"]);
game.shuffle();
console.log(game.elements[0]);// refresh the page to shuffle

Вышективный объект функции принимает массив и передает его. Я использую новый Ключевое слово для автоматического создания конструктора.

Не двигай Shuffle () Метод внутри конструктора, даже если вы думаете о заводской структуре.

Это возможно, но вы бы добавили один Shuffle () Метод для каждого экземпляра. Каждое свойство, которую вы добавляете в свои объекты, потребляют память.

Shuffle () Метод больше похоже на статическую функцию. Если вы копируете его на каждый экземпляр, это неэффективно.

Давайте попробуем с прототипом:

let game = new Game(["rock", "paper", "scissors"]);
let game2 = new Game(["", "", "", "", "", "", "bullet"]);
game.shuffle();
game2.shuffle();//russian roulette ^^
console.log(game.elements[0], game2.elements[0]);
console.log(game.shuffle === game2.shuffle);// true

Это один Shuffle () Метод только для всех случаев, без ненужной копии, без дополнительной потребления памяти.

N.B.: Игра Функция конструктора. То новый Ключевое слово позволяет построить объект и возвращать экземпляр объекта. Так как Игра не возвращает ничего JavaScript автоматически вставляет вернуть это; в конце.

Не прикасайтесь к родным прототипам

JavaScript – это язык на основе прототипа, но у них есть имя для атации модификации нативных прототипов: Обезьяна исправляет Отказ

Не делайте следующее:

Array.prototype.shuffle  = function () {}

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

Не используйте __proto__

__Proto__ это свойство Accessior, который обнажает внутренний прототип объекта.

Пожалуйста, не делайте следующее:

MyObject.__proto__ = function() {};

Хотя это возможно, это дерьмовая практика, потому что она нарушает оптимизацию браузера с прототипами.

Аналогично, используя Object.SetPrototepeef () не рекомендуется.

Какова цель HasownProperty ()?

Если вы ищете что-то высокое в цепочке, это может повредить производительность. Любая попытка получить свойство, которая не существует результатов в полной цепочке.

К счастью, JavaScript имеет встроенный метод, который вы можете использовать, чтобы проверить, унаследовано ли свойство или нет:

function Game(elements) {
  this.elements = elements;
}
let game = new Game(["rock", "paper", "scissors"]);
console.log(game.hasOwnProperty("elements"));// true
console.log(game.hasOwnProperty("hasOwnProperty"));// false

Уклониться от этого

Это всегда тот же порядок. JavaScript сначала смотрит в конструкторе тогда в прототипе:

function Game(elements) {
  this.elements = elements;
}
Game.prototype.name = "Russian Roulette";
Game.prototype.elements = ["", "", "", "", "", "", "bullet"]
let game = new Game(["rock", "paper", "scissors"]);
console.log(game.name);// Russian Roulette"
console.log(game.elements);// ["rock", "paper", "scissors"]

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

Вывод

Прототипы являются эффективным способом обмена свойствами по нескольким экземплярам.

Они оптимизируют потребление памяти и использование CPU. Они также делают JavaScript изысканно модульно, если вы используете его правильно.

Оригинал: “https://dev.to/jmau111/the-joy-of-prototypes-1ha2”