JavaScript: Как создать класс (3 способа)?

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

1. Создадим класс из функции

Создавать классы в JavaScript просто, давайте посмотрим на первый вариант:

function Car() {
  this.types = [
    'bmw',
    'mercedes',
    'zhiguli'
  ];

  this.add = function(name) {
    this.types.push(name);
  }
}

Сам класс называется Car, у него есть значение types, которое является массивом со значениями разных марок автомобилей. Так же, там есть метод add(), который выполняет функцию добавления новой марки автомобиля используя метод помощник push().

После этого мы можем инициализировать класс:

var c = new Car();

и добавить новую марку машины в массив types:

c.add('kamaz');

Теперь выведем весь список марок в классе Car:

console.log(c.types); // (4) ["bmw", "mercedes", "zhiguli", "kamaz"]

Добавим новые методы-помощники

Давайте добавим еще один метод — удаление определенной марки автомобиля (назовем его remove()):

function Car() {
  this.types = [
    'bmw',
    'mercedes',
    'zhiguli'
  ];

  this.add = function(name) {
    this.types.push(name);
  }

  this.remove = function(name) {
  // проверяем есть ли такое имя в масиве 
  var index = this.types.indexOf(name);
  // index вернет "-1", если ничего не будет найдено
  if( index < 0 ) {
    console.log('Машина с именем ' + name + ' не существует.');
  }

  // если что-то было найдено, используем метод splice для удаления этого элемента из масива
  this.types.splice(index, 1);
  }
}

В коде выше описан весь процесс работы метода remove().

На что вам стоит обратить внимание:

• indexOf() не поддерживается в Internet Explorer 7 и 8. Для этого вам нужно будет использовать другой способ, например использовать полифилл или циклично пройтись по массиву и сравнить значение (только если он не большой).
• splice() может удалять или добавлять новые элементы в массив. Я его использую для удаления элемента. Первый аргумент — это индекс, который нужно удалить, второй — это кол-во элементов для удаления.

Объект и синглетон

Остается еще два варианта создания классов в JavaScript: объект и синглетон.

Создадим объект

Возьмем класс Car из функции которая была описана выше и сделаем из нее объект, и вот что из этого получается:

var car = {
  types: [
    'bmw',
    'mercedes',
    'zhiguli'
  ],
  add: function(name) {
    this.types.push(name);
  },

  remove: function(name) {
     var index = this.types.indexOf(name);
     if( index < 0 ) {
       console.log('Машина с именем ' + name + ' не существует.');
     }

     this.types.splice(index, 1);
  }
}

Использовать этот объект можно следующим образом:

car.types; // (3) ["bmw", "mercedes", "zhiguli"]
car.remove('bmw'); // ["bmw"]

Нам не нужно инициализировать (объявлять) класс, потому что он уже это сделал сам — это как переменная внутри которой есть параметры и методы.

Создадим синглетон

Теперь покажу как написать синглатон из того же класса, что у нас имеется (за основу я взял объект, так как эти два типа данных схожи):

var car = new function() {
  this.types = [
    'bmw',
    'mercedes',
    'zhiguli'
  ];
  this.add = function(name) {
    this.types.push(name);
  },

  this.remove = function(name) {
     var index = this.types.indexOf(name);
     if( index < 0 ) {
       console.log('Машина с именем ' + name + ' не существует.');
     }

     return this.types.splice(index, 1);
  }
};

Самое важное, что мне нужно объяснить в этом примере — это new function():

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

Послесловие

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

И да, в JavaScript не существует классов, все является объектами, поэтому в этой записи все упоминания связанные с «класс» на самом деле относятся к объектам.

Почему я сначала пишу «класс» и т.д., а в конце записи пишу совсем другое? Очень часто новички путаются, и чтобы самые внимательные (которые читаю до конца записи) знали как обстоят дела.

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

Источники

• splice()
• indexOf()