37. Синтаксис классов ES6

JavaScript: Мозги. Урок 4: Синтаксис классов ES6

Иллюстрация к уроку В этом уроке мы разберем синтаксис классов ES6, который значительно упрощает создание объектов в JavaScript. Классы позволяют писать более структурированный и понятный код, особенно при работе со сложными приложениями.

Что такое классы в JavaScript?

В JavaScript до ES6 (ECMAScript 2015), “классы” реализовывались через функции-конструкторы и прототипы. ES6 ввел синтаксис class, который предоставляет более декларативный и знакомый для многих программистов способ определения объектов. Важно понимать, что под капотом class в JavaScript – это все те же прототипы, но с более удобным синтаксисом.

Синтаксис класса

Основной синтаксис класса выглядит так:

class MyClass {
  constructor(property1, property2) {
    this.property1 = property1;
    this.property2 = property2;
  }

  method1() {
    // Действия, выполняемые методом
    console.log("Method 1 called!");
  }

  method2(parameter) {
    // Действия, выполняемые методом с параметром
    console.log("Method 2 called with parameter: " + parameter);
  }
}

// Создание экземпляра класса
const myObject = new MyClass("Value 1", "Value 2");

// Вызов методов
myObject.method1(); // Выведет "Method 1 called!"
myObject.method2("Hello"); // Выведет "Method 2 called with parameter: Hello"

// Доступ к свойствам
console.log(myObject.property1); // Выведет "Value 1"

Разберем элементы синтаксиса:

class MyClass { ... } - Определение класса с именем MyClass.
constructor(property1, property2) { ... } - Конструктор класса. Вызывается при создании нового экземпляра класса с помощью new. Внутри конструктора обычно происходит инициализация свойств объекта.
this - Ключевое слово, которое ссылается на текущий экземпляр класса.
method1() { ... } и method2(parameter) { ... } - Методы класса. Это функции, которые привязаны к экземпляру класса.

Практические примеры

Пример 1: Класс “Книга”

class Book {
  constructor(title, author, pages) {
    this.title = title;
    this.author = author;
    this.pages = pages;
  }

  getDescription() {
    return `${this.title} by ${this.author} has ${this.pages} pages.`;
  }
}

const book1 = new Book("The Lord of the Rings", "J.R.R. Tolkien", 1178);
console.log(book1.getDescription()); // Выведет "The Lord of the Rings by J.R.R. Tolkien has 1178 pages."

Пример 2: Класс “Автомобиль”

class Car {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
    this.speed = 0; // Начальная скорость
  }

  accelerate(increment) {
    this.speed += increment;
    console.log(`Speed increased to ${this.speed}`);
  }

  brake(decrement) {
    this.speed -= decrement;
    if (this.speed < 0) {
      this.speed = 0;
    }
    console.log(`Speed decreased to ${this.speed}`);
  }
}

const myCar = new Car("Toyota", "Camry", 2023);
myCar.accelerate(30); // Выведет "Speed increased to 30"
myCar.brake(10);    // Выведет "Speed decreased to 20"

Жизненный пример

Классы широко используются во фреймворках и библиотеках JavaScript, таких как React, Angular и Vue.js. Например, компоненты в React часто определяются с использованием классов:

// React Example
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.handleClick()}>Increment</button>
      </div>
    );
  }
}

В этом примере MyComponent является классом, который наследуется от React.Component. Он имеет конструктор, методы (например, handleClick и render), и свойства (например, this.state).

Ключевые моменты

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