Классы в JavaScript

07.01.2020

В 2015 году ECMAScript 6 (ES6) представил классы. Наследование в JavaScript реализовано с помощью прототипов. Для программистов, которые пришли из других языков такие как Python, Java, это достаточно тяжело понять как устроено наследование в JavaScript. Поэтому создатели языка JavaScript решили добавить немного “синтаксического сахара”. Но по факту наследование в JavaScript как было реализовано с помощью прототипов, так и осталось.

Определение класса

Объявим класс для автомобилей.

class Car {
	constructor(brand) {
		this.brand = brand;
	}

	on() {
		return `Your ${this.brand} is on`; 
	}
}

Как мы видим из примера выше, класс имеет: имя Car, конструктор и метод on(). Имя класса используется для создания объектов данного класса. Во время создания объекта данного класса будет вызван constructor, все параметры указанные при создание попадут в этот метод. Класс может иметь методы, в примере мы объявили метод on(), его смогут использовать все наследники и экземпляры класса Car. Пример использования,

let a4 = new Car(‘Audi’);
a4.on();

Наследование

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

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

class Truck extends Car {
	on() {
		return `Your truck ${this.brand} is on`;
	}
}

const ram = new Truck(‘RAM’);
ram.on(); // -> Your truck RAM is on 

Если вы хотите определить переменную класса, то вы должны сделать это в конструкторе.
Внутри класса вы можете обращаться к родительскому классу с помощью метода super().

Статические методы

Бывают ситуации когда методы относят к классу, но при этом не относятся к конкретному объекту, а принадлежат классу в целом. Такие методы называются статические.

class Car {
	static listOfBrands() {
		return [‘RAM’, ‘GMC’, ‘Toyota’, ‘Nissan’];
	}
} 

Car.listOfBrands(); 

Getters & Setters

В JavaScript вы можете объявить два специальных типа методов в классе, с префиксами get или set. Они используются для ограничения действий с переменными класса.

class Person {
  constructor(name) {
    this.name = name;
  }

  set name(value) {
    console.log('setter');
    this._name = value
  	}

  get name() {
	  console.log('getter');
    return this._name
  }
}

let artem = new Person('Artem');
console.log(artem.name);

В результате выполнения будет выведено следующее

setter
getter
Artem

Если вы хотите убрать возможность устанавливать значение переменной name извне, то просто уберите метод set name().

class Person {
  constructor(name) {
    this._name = name;
  }

  get name() {
    return this._name
  }
}

Если нужно, чтобы невозможно было прочитать значение переменной, то удалите метод get name().

class Person {
  constructor(name) {
    this._name = name;
  }

  set name(value) {
    this._name = value
  	}
}

Ключевое слово this

Во многих примерах выше мы использовали ключевое слово this, оно является указателем на текущий объект класса. С помощью него можно обращаться к методам и переменным объявленным внутри класса. Для статических методов this недоступен. Значение this невозможно поменять.

В следующей статье…

Мы рассмотрим замыкания, одна из самых интересных тем в мире JavaScript.

#jsbook#javascript

Еженедельная рассылка новостей

Замыкания в JavaScript

Прототип в JavaScript