Уводзіны ў класы і аб'екты ў JavaScript

Зараз мы з вамі займемся вывучэннем ААП у JavaScript. Давайце разгледзім прыклад з жыцця, а потым перанясем яго на JavaScript.

У якасці прыкладу возьмем аўтамабіль. У яго ёсць колы, колер, выгляд кузава, аб'ём рухавіка і так далей. Акрамя таго, кіроўца можа аддаваць яму каманды: ехаць, спыніцца, павярнуць направа, налева і г.д.

Можна казаць пра тое, што існуе нейкі клас аўтамабіляў, які валодае агульнымі ўласцівасцямі (у ўсіх ёсць колы і ўсім ім можна аддаваць каманды).

Канкрэтны аўтамабіль, які стаіць на вуліцы - гэта прадстаўнік гэтага класа, або, іншымі словамі, аб'ект гэтага класа. У ўсіх аб'ектаў гэтага класа ёсць ўласцівасці: колькасць колаў, колер, выгляд кузава і метады: ехаць, спыніцца, павярнуць направа, налева.

Іншымі словамі сам клас - гэта чарцёж, па якім на заводзе робяцца аўтамабілі. Аб'ект жа - гэта сама машына, зробленая па гэтых чарцяжах.

У JavaScript клас ствараецца з дапамогай ключавога слова class, за якім ідзе назва гэтага класа. Давайце зробім клас Car:

javascriptclass Car {
  // тут код, гэта значыць JavaScript-чарцёж аўтамабіля
}

Пакажам цяпер у нашым чарцяжы, што любы аўтамабіль, створаны па гэтым чарцяжы, будзе мець уласцівасць для колеру і ўласцівасць для колькасці паліва.

Для гэтага ўнутры класа напішам уласцівасць color і ўласцівасць fuel:

javascriptclass Car {
  color; // колер аўтамабіля
  fuel;  // колькасць паліва
}

Давайце цяпер зробім метады нашага класа. У JavaScript метады падобныя на звычайныя функцыі, толькі аб'яўляюцца без ключавога слова function.

Як ужо згадвалася вышэй, наш аўтамабіль можа ехаць, можа паварочваць, можа спыняцца. Зробім адпаведныя метады ў нашым класе:

javascriptclass Car {
  color; // колер аўтамабіля
  fuel;  // колькасць паліва
  
  // Каманда ехаць:
  go() {
    // нейкі JavaScript код
  }
  
  // Каманда паварочваць:
  turn() {
    // нейкі JavaScript код
  }
  
  // Каманда спыніцца:
  stop() {
    // нейкі JavaScript код
  }
}

Мы з вамі зрабілі чарцёж нашага аўтамабіля. Цяпер трэба адправіцца на завод і зрабіць аб'ект гэтага класа (гэта значыць канкрэтны аўтамабіль).

У JavaScript гэта робіцца з дапамогай ключавога слова new, пасля якога пішацца імя класа:

javascriptnew Car; // камандуем заводу зрабіць аўтамабіль

Аднак, калі проста стварыць аб'ект класа - гэта ні да чаго не прывядзе (гэта ўсё роўна, што, да прыкладу, аб'явіць масіў і нікуды яго не запісаць). Нам патрэбная зменная для захоўвання гэтага аб'екта.

Хай гэтая зменная будзе называцца myCar - запішам у яе створаны намі аб'ект:

javascriptlet myCar = new Car;

Пасля стварэння аўтамабіля можна звяртацца да яго ўласцівасцяў. Зварот да іх адбываецца праз кропку. Давайце ўсталюем уласцівасці нашага аб'екта:

javascriptlet myCar = new Car; // камандуем заводу зрабіць аўтамабіль

myCar.color = 'red'; // фарбуем у чырвоны колер
myCar.fuel = 50;     // заліваем паліва

Усё, наш аўтамабіль створаны, афарбаваны і запраўлены. Цяпер мы можам аддаваць яму каманды праз метады гэтага аўтамабіля.

Зварот да метадаў таксама адбываецца праз кропку, але, у адрозненне ад уласцівасці, пасля імя метаду варта пісаць круглыя дужкі. Давайце пакамандуюем нашым аб'ектам:

javascriptmyCar.go();
myCar.turn();
myCar.stop();