Образцы экземпляров JavaScript и их ключевые различия

Короче говоря, шаблоны экземпляров – это методы (не обязательно метод JavaScript), с помощью которых мы можем создать несколько экземпляров объектов, которые имеют одинаковые начальные свойства/методы. Предполагая, что у вас уже есть базовое понимание этой концепции и почему вы хотели бы сделать это, давайте направимся к ней.

Пять основных типов:

• Функциональный
• Функциональный общий
• Прототипа
• Псевдоклассический
• Псевдоклассический ES6

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

Функциональный

Возможно, самым упрощенным из группы было бы первым в этом списке; Функциональный Анкет Давайте посмотрим на основной пример того, как это будет настроено.

const Person = function(nameLast, nameFirst, age) {
  const obj = {};
  obj.fullname = `${nameFirst} ${nameLast}`;
  obj.age = age;
  obj.isMillenial = function() {
    return age >= 24 && age <= 39;
  }
  obj.rename = function(nameLast, nameFirst) {
    obj.fullname = `${nameFirst} ${nameLast}`;
  }
  return obj;
};

const austin = Person("Brown", "Austin", 26);

Ниже приведен то, как объект «Остин» будет выглядеть так же, как это создано на последней строке.

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

У этого, вероятно, есть наименьшие преимущества, кроме того, что его просто понять/написать и достигать предполагаемой цели сохранения времени и строк кода.

Функциональный Однако это хорошо для небольших наборов данных, однако, как правило, он считается наименьшим эффективным, потому что для каждого нового объекта код копируется в памяти и, следовательно, не так эффективен, как это может быть, как вы увидите в более поздних примерах.

Функциональный общий

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

Вот пример Функциональный общий Это создаст те же экземпляры, что и последний пример:

const Person = function(nameLast, nameFirst, age) {
  const obj = {};
  obj.fullname = `${nameFirst} ${nameLast}`;
  obj.age = age;
  Object.assign(obj, methods);
  return obj;
};

const methods = {
  isMillenial: function() {
    return this.age >= 24 && this.age <= 39;
  },
  rename: function(nameLast, nameFirst) {
    this.fullname = `${nameFirst} ${nameLast}`;
  }
}

const austin = Person("Brown", "Austin", 26);

Основной недостаток с Функциональный общий , в отличие от некоторых из наиболее продвинутых моделей экземпляров, заключается в том, что если вы решите изменить общие методы («методы Const» в примере) в любой точке после создания экземпляра («const austin» на последней строке), эти Изменения не будут отражены ни в одном из случаев, созданных до этого момента, и все новые экземпляры будут указывать на новый набор методов.

Прототипа

Самое важное изменение в Прототип это введение “Object.Create ()”. «Object.Create ()» – это метод JavaScript, который решает вышеупомянутую проблему в Функциональный общий .

Как и ожидалось, вот еще один пример:

const Person = function(nameLast, nameFirst, age) {
  const obj = Object.create(methods);
  obj.fullname = `${nameFirst} ${nameLast}`;
  obj.age = age;
  return obj;
};

const methods = {
  isMillenial: function() {
    return this.age >= 24 && this.age <= 39;
  },
  rename: function(nameLast, nameFirst) {
    this.fullname = `${nameFirst} ${nameLast}`;
  }
}

const austin = Person("Brown", "Austin", 26);

На второй строке «Object.Create ()» в основном объединяет цель второго и пятого из предыдущего примера и добавляет дополнительную функциональность. «Object.Create ()» навсегда расширит методы, передаваемые как аргумент на созданные с ним экземпляры. Теперь, если скажем, мы решим добавить новый метод к «методам коннала», все экземпляры, независимо от того, когда они были созданы по сравнению с тем, когда это изменение будет сделано, покажет новый метод.

Псевдоклассический

В Псевдоклассический , мы вводим «.prototype» и «New» и изменяем использование ключевого слова «это».

const Person = function(nameLast, nameFirst, age) {
  this.fullname = `${nameFirst} ${nameLast}`;
  this.age = age;
};

Person.prototype.isMillenial = function() {
    return this.age >= 24 && this.age <= 39;
};
Person.prototype.rename = function(nameLast, nameFirst) {
  this.fullname = `${nameFirst} ${nameLast}`;
};

const austin = new Person("Brown", "Austin", 26);

Вместо того, чтобы расширять наши методы на каждый объект, мы добавляем методы непосредственно в «класс» «человека» с использованием. На последней строке «Новый» устанавливает контекст для «этого» ключевого слова, замеченного в приведенном выше коде, чтобы ссылаться на тот конкретный экземпляр, который вы создаете (например, «Const Austin» на последней строке).

Псевдоклассический ES6

Основное отличие здесь заключается в том, что синтаксис поднимается до ES6, поэтому он выглядит немного чище и имеет новые ключевые слова «класс» и «конструктор».

class Person {
  constructor(nameLast, nameFirst, age) {
    this.fullname = `${nameFirst} ${nameLast}`;
    this.age = age;
  };
  isMillenial() {
      return this.age >= 24 && this.age <= 39;
  };
  rename(nameLast, nameFirst) {
    this.fullname = `${nameFirst} ${nameLast}`;
  };
};

const austin = new Person("Brown", "Austin", 26);

Резюме

*(Каждая исправленная проблема продолжается к последующим шаблонам)

Функциональный

• Простой/читабель
• Неэффективно

Функциональный общий

• Представляет ключевое слово «это»
• Более эффективно, чем Функциональный
• Общие методы не изменятся после экземпляра

Прототипа

• Представляет “object.create ()”
• Исправляет общие методы выпуск из -за Функциональный общий

Псевдоклассический

• Представляет “.prototype” и “new” вместо “object.create ()”
• Функция конструктора – устраняет необходимость объявления объекта буквально
• Требует меньше кода, чем Прототипа

Псевдоклассический ES6

• Синтаксис ES6 (чище, меньше кода, вводит ключевые слова «класс» и «конструктор»)

Оригинал: “https://dev.to/austinbrownopspark/javascript-instantiation-patterns-and-their-key-differences-2alp”