Классы JavaScript

Оглавление

    Показать оглавление

ECMAScript 2015, также известный как ES6, представил классы JavaScript.

Классы JavaScript — это шаблоны объектов JavaScript.

Синтаксис классов JavaScript

Используйте ключевое слово class, чтобы создать класс.

Всегда добавляйте метод с именем constructor():

Синтаксис

class ClassName {
   constructor() { ... }
}

Пример

class Car {
   constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

В приведенном выше примере создается класс с именем «Car».

Класс имеет два начальных свойства: «имя» и «год».

Класс JavaScript не является объектом.

Это шаблон для объектов JavaScript.

Использование класса

Если у вас есть класс, вы можете использовать его для создания объектов:

Пример

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Classes</h1>
<p>Creating two car objects from a car class:</p>

<p id="demo"></p>

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);

document.getElementById("demo").innerHTML =
myCar1.name + " " + myCar2.name;
</script>

</body>
</html>

В приведенном выше примере класс Car используется для создания двух объектов Car.

Метод конструктора вызывается автоматически при создании нового объекта.

Метод конструктора

Метод конструктора — это специальный метод:

  • Он должен иметь точное имя «конструктор».

  • Он выполняется автоматически при создании нового объекта.

  • Он используется для инициализации свойств объекта.

Если вы не определите метод конструктора, JavaScript добавит пустой метод конструктора.

Методы класса

Методы класса создаются с тем же синтаксисом, что и методы объекта.

Используйте ключевое слово class, чтобы создать класс.

Всегда добавляйте метод constructor().

Затем добавьте любое количество методов.

Синтаксис

class ClassName {
   constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

Создайте метод класса с именем «возраст», который возвращает возраст автомобиля:

Пример

class Car {
   constructor(name, year) {
    this.name = name;
    this.year = year;
   }
  age() {
    const date = new Date();
    return date.getFullYear() - this.year;
   }
}

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Methods</h1>
<p>How to define and use a Class method.</p>

<p id="demo"></p>

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;

  }
  age() {
    const date = new Date();
    return date.getFullYear() - this.year;
  }
}

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
</script>

</body>
</html>

Вы можете отправлять параметры методам класса:

Пример

class Car {
  constructor(name, year) {
    
  this.name = name;
    this.year = year;
  }
  
  age(x) {
    return x - this.year;
  }
}

  const date = new Date();
  let year = date.getFullYear();
const myCar = new 
  Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is 
  " + myCar.age(year) + " years old.";

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Class Method</h1>
<p>Pass a parameter into the "age()" method.</p>

<p id="demo"></p>

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}

const date = new Date();
let year = date.getFullYear();

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is " + myCar.age(year) + " years old.";
</script>

</body>
</html>

Поддержка браузера

В следующей таблице представлена первая версия браузера с полной поддержкой Классы в JavaScript:

Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
Mar, 2016 Jul, 2015 Mar, 2016 Oct, 2015 Mar, 2016

Позже в этом уроке вы узнаете больше о классах JavaScript.