JavaScript с нуля - [46]
class Planet {
constructor(name, radius) {
this.name = name;
this.radius = radius;
}
}
Вы можете совершать гораздо больше (или меньше) интересных действий изнутри конструктора, главное не забывать, что этот код будет выполняться каждый раз, когда мы будем создавать новый объект, используя класс Planet. Кстати говоря, вот как вы можете вызвать класс Planet для создания объекта:
let myPlanet = new Planet("Earth", 6378);
console.log(myPlanet.name); // Earth
Обратите внимание, что два аргумента, которые нам нужно указать в конструкторе, в действительности указаны в самом классе Planet. Когда создается наш объект myPlanet, запускается конструктор и значения name и radius, переданные ранее, устанавливаются в этом объекте. Рисунок 20.2 показывает, как это выглядит.
Рис. 20.2. Наш объект myPlanet содержит свойства name и radius
Хоть мы и изучаем синтаксис class и окружающие его детали, всегда помните, что все это лишь посыпка — изысканный синтаксический сахар, разработанный для облегчения вашей жизни. Если не использовать синтаксис class, то можно сделать так, например:
function Planet(name, radius) {
this.name = name;
this.radius = radius;
};
let myPlanet = new Planet("Earth", 6378);
console.log(myPlanet.name); // Земля
Конечный результат почти что идентичен тому, что мы получили с помощью class. Единственное отличие — в средствах достижения этого результата. Тем не менее не дайте этому сравнению сбить вас с верного пути, так как другие полезные варианты использования синтаксиса class уже не получится столь же легко преобразовать с помощью традиционных подходов, как мы сделали в этом примере.
Что помещается в класс
Объекты class очень похожи на функции, но имеют свои причуды. Один из помещаемых внутрь класса элементов мы уже видели — это особая функция constructor. Помимо нее в него можно поместить только другие функции и методы, а также геттеры и сеттеры. Все. Никаких объявлений и инициализаций переменных не допускается.
Чтобы все это увидеть в действии, давайте добавим функцию getSurfaceArea, которая выводит в консоль площадь нашей планеты. Внесите в код следующие изменения:
class Planet {
constructor(name, radius) {
this.name = name;
this.radius = radius;
}
getSurfaceArea() {
let surfaceArea = 4 * Math.PI * Math.pow(this.radius, 2);
console.log(surfaceArea + " square km!");
return surfaceArea;
}
}
Вызовите getSurfaceArea из созданного объекта, чтобы увидеть ее в деле:
let earth = new Planet("Earth", 6378);
earth.getSurfaceArea();
После выполнения этого кода вы увидите в консоли что-то вроде 511 миллионов квадратных километров. Хорошо. Поскольку мы упомянули, что в тело класса могут быть помещены геттеры и сеттеры, давайте их также добавим. Используем же мы их, чтобы представить гравитацию планеты:
class Planet {
constructor(name, radius) {
this.name = name;
this.radius = radius;
}
getSurfaceArea() {
let surfaceArea = 4 * Math.PI * Math.pow(this.radius, 2);
console.log(surfaceArea + " square km!");
return surfaceArea;
}
set gravity(value) {
console.log("Setting value!");
this._gravity = value;
}
get gravity() {
console.log("Getting value!");
return this._gravity;
}
}
let earth = new Planet("Earth", 6378);
earth.gravity = 9.81;
earth.getSurfaceArea();
console.log(earth.gravity) // 9.81
Вот и все. Такое добавление элементов в тело класса хорошо тем, что они не будут существовать в созданном объекте. Вместо этого они будут находиться в прототипе (Planet.prototype), как показано на рис. 20.3.
Рис. 20.3. Нам не нужно делать ничего особенного, чтобы обратиться к объекту-прототипу
Это очень хорошо, так как нам не нужно, чтобы каждый объект без необходимости носил в себе копию содержимого класса, когда с этим прекрасно справляется совместно используемый экземпляр. Наши геттер и сеттер gravity наряду с функцией getSurfaceArea полностью существуют в прототипе.
Почему функции внутри класса выглядят странно?
Вы могли заметить, что функции внутри класса выглядят несколько необычно. К примеру, в них не достает ключевого слова function. Эта странность (в данном случае) не связана с самими классами. Дело в том, что при определении функций внутри объектов можно использовать упрощенный синтаксис.
Вместо написания, например, этого:
let blah = {
zorb: function() {
// что-то интересное
}
};
вы можете сократить определение функции zorb до следующего:
let blah = {
zorb() {
// что-то интересное
}
};
Именно такую сокращенную форму вы будете встречать и использовать при определении функций внутри тела класса.
Расширение объектов
Последнее, что мы рассмотрим, связано с расширением объектов в мире классов. Чтобы разобраться в этой теме, мы будем работать с совершенно новым типом планеты, известным как Potato Planet (планета Картофель).
Планета Картофель содержит все, что присуще обычной планете, но состоит она полностью из картофеля, в противоположность расплавленным камням и газу, составляющим другие виды планет. Наша задача определить планету Картофель как класс. Ее функциональность будет, по большому счету, отражать представленную в классе Planet, но мы также добавим некоторые дополнительные элементы вроде аргумента potatoType в конструкторе и метода getPotatoType, выводящего в консоль значение potatoType.
