ES6 - Классы

Object Orientationпредставляет собой парадигму разработки программного обеспечения, которая следует за моделированием реального мира. Объектная ориентация, рассматривает программу как набор объектов, которые взаимодействуют друг с другом через механизм, называемыйmethods. ES6 также поддерживает эти объектно-ориентированные компоненты.

Концепции объектно-ориентированного программирования

Для начала давайте разберемся

  • Object- Объект - это представление любого объекта в реальном времени. По словам Грэди Броши, у каждого объекта есть 3 особенности:

    • State - Описывается атрибутами объекта.

    • Behavior - Описывает, как объект будет действовать.

    • Identity - Уникальное значение, которое отличает объект от множества подобных объектов.

  • Class- Класс в терминах ООП - это план для создания объектов. Класс инкапсулирует данные для объекта.

  • Method - Методы, облегчающие общение между объектами.

Давайте переведем эти объектно-ориентированные концепции на те, что используются в реальном мире. Например: Автомобиль - это объект, у которого есть данные (марка, модель, количество дверей, номер транспортного средства и т. Д.) И функциональные возможности (ускорение, переключение передач, открытие дверей, включение фар и т. Д.)

До ES6 создание класса было делом суетливым. Классы могут быть созданы с использованием ключевого слова class в ES6.

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

Синтаксис: объявление класса

class Class_name {  
}

Синтаксис: выражения класса

var var_name = new Class_name {  
}

За ключевым словом class следует имя класса. При именовании класса необходимо учитывать правила для идентификаторов (уже обсужденные).

Определение класса может включать следующее:

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

  • Functions- Функции представляют действия, которые может выполнять объект. Иногда их также называют методами.

Эти компоненты вместе называются членами данных класса.

Note - Тело класса может содержать только методы, но не свойства данных.

Пример: объявление класса

class Polygon { 
   constructor(height, width) { 
      this.height = height; 
      this.width = width; 
   } 
}

Пример: выражение класса

var Polygon = class { 
   constructor(height, width) { 
      this.height = height; 
      this.width = width; 
   } 
}

Приведенный выше фрагмент кода представляет собой безымянное выражение класса. Выражение именованного класса можно записать как.

var Polygon = class Polygon { 
   constructor(height, width) { 
      this.height = height; 
      this.width = width; 
   } 
}

Note - В отличие от переменных и функций, классы не могут быть подняты.

Создание объектов

Чтобы создать экземпляр класса, используйте ключевое слово new, за которым следует имя класса. Ниже приведен синтаксис того же.

var object_name= new class_name([ arguments ])

Куда,

  • Новое ключевое слово отвечает за создание экземпляра.

  • Правая часть выражения вызывает конструктор. Конструктору следует передавать значения, если он параметризован.

Пример: создание класса

var obj = new Polygon(10,12)

Доступ к функциям

Доступ к атрибутам и функциям класса можно получить через объект. Использовать '.'dot notation (называется периодом) для доступа к элементам данных класса.

//accessing a function 
obj.function_name()

Пример: объединить их

'use strict' 
class Polygon { 
   constructor(height, width) { 
      this.h = height; 
      this.w = width;
   } 
   test() { 
      console.log("The height of the polygon: ", this.h) 
      console.log("The width of the polygon: ",this. w) 
   } 
} 

//creating an instance  
var polyObj = new Polygon(10,20); 
polyObj.test();

В приведенном выше примере объявляется класс «Многоугольник». Конструктор класса принимает два аргумента - высоту и ширину соответственно. В‘this’ключевое слово относится к текущему экземпляру класса. Другими словами, указанный выше конструктор инициализирует две переменные h и w значениями параметров, переданными конструктору. Вtest () функция в классе, печатает значения высоты и ширины.

Для того, чтобы скрипт работал, создается объект класса Polygon. Объект упоминаетсяpolyObjпеременная. Затем функция вызывается через этот объект.

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

The height of the polygon:  10 
The width of the polygon:  20

Сеттеры и геттеры

Сеттеры

Функция установки вызывается при попытке установить значение свойства. Вset keywordиспользуется для определения функции установки. Синтаксис для определения функции установки приведен ниже -

{set prop(val) { . . . }}
{set [expression](val) { . . . }}

prop - это имя свойства, которое нужно привязать к данной функции. val - это псевдоним для переменной, которая содержит значение, которое пытались присвоить свойству. expression с ES6 может использоваться как имя свойства для привязки к данной функции.

пример

<script>
   class Student {
      constructor(rno,fname,lname){
         this.rno = rno
         this.fname = fname
         this.lname = lname
         console.log('inside constructor')
      }
      set rollno(newRollno){
         console.log("inside setter")
         this.rno = newRollno
      }
   }
   let s1 = new Student(101,'Sachin','Tendulkar')
   console.log(s1)
   //setter is called
   s1.rollno = 201
   console.log(s1)
</script>

В приведенном выше примере определяется класс Student с three properties а именно rno, fname and lname. Функция установкиrollno() используется для установки значения свойства rno.

Вывод приведенного выше кода будет таким, как показано ниже -

inside constructor
Student {rno: 101, fname: "Sachin", lname: "Tendulkar"}
inside setter
Student {rno: 201, fname: "Sachin", lname: "Tendulkar"}

пример

В следующем примере показано, как использовать expression как имя свойства с setter function.

<script>
   let expr = 'name';
      let obj = {
      fname: 'Sachin',
      set [expr](v) { this.fname = v; }
   };
   console.log(obj.fname);
   obj.name = 'John';
   console.log(obj.fname);
</script>

Вывод приведенного выше кода будет таким, как указано ниже -

Sachin
John

Геттеры

А getter functionвызывается при попытке получить значение свойства. Вget keywordиспользуется для определения функции получения. Синтаксис для определения функции получения приведен ниже -

{get prop() { ... } }
{get [expression]() { ... } }

prop - это имя свойства, которое нужно привязать к данной функции.

expression - Начиная с ES6, вы также можете использовать выражения в качестве имени свойства для привязки к данной функции.

пример

<script>
   class Student {
      constructor(rno,fname,lname){
         this.rno = rno
         this.fname = fname
         this.lname = lname
         console.log('inside constructor')
      }
      get fullName(){
         console.log('inside getter')
         return this.fname + " - "+this.lname
      }
   }
   let s1 = new Student(101,'Sachin','Tendulkar')
   console.log(s1)
   //getter is called
   console.log(s1.fullName)
</script>

В приведенном выше примере определяется класс Student с тремя свойствами, а именно rno, fname and lname. Функция полученияfullName() объединяет fname и lname и возвращает новую строку.

Вывод приведенного выше кода будет таким, как указано ниже -

inside constructor
Student {rno: 101, fname: "Sachin", lname: "Tendulkar"}
inside getter
Sachin - Tendulkar

пример

В следующем примере показано, как использовать выражение в качестве имени свойства с функцией получения.

<script>
   let expr = 'name';
   let obj = {
      get [expr]() { return 'Sachin'; }
   };
   console.log(obj.name);
</script>

Вывод приведенного выше кода будет таким, как указано ниже -

Sachin

Статическое ключевое слово

Ключевое слово static может применяться к функциям в классе. На статические члены ссылаются по имени класса.

пример

'use strict' 
class StaticMem { 
   static disp() { 
      console.log("Static Function called") 
   } 
} 
StaticMem.disp() //invoke the static metho

Note- Не обязательно включать определение конструктора. Каждый класс по умолчанию имеет конструктор по умолчанию.

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

Static Function called

Оператор instanceof

Оператор instanceof возвращает true, если объект принадлежит указанному типу.

пример

'use strict' 
class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log(" obj is an instance of Person " + isPerson);

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

obj is an instance of Person True

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

ES6 поддерживает концепцию Inheritance. Наследование - это способность программы создавать новые сущности из существующей сущности - в данном случае класса. Класс, который расширяется для создания новых классов, называетсяparent class/super class. Вновь созданные классы называютсяchild/sub classes.

Класс наследуется от другого класса с помощью ключевого слова extends. Дочерние классы наследуют все свойства и методы, кроме конструкторов, от родительского класса.

Ниже приведен синтаксис того же.

class child_class_name extends parent_class_name

Пример: наследование класса

'use strict' 
class Shape { 
   constructor(a) { 
      this.Area = a
   } 
} 
class Circle extends Shape { 
   disp() { 
      console.log("Area of the circle:  "+this.Area) 
   } 
} 
var obj = new Circle(223); 
obj.disp()

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

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

Area of Circle: 223

Наследование можно классифицировать как -

  • Single - Каждый класс может происходить максимум от одного родительского класса.

  • Multiple- Класс может наследовать от нескольких классов. ES6 не поддерживает множественное наследование.

  • Multi-level - Рассмотрим следующий пример.

'use strict' 
class Root { 
   test() { 
      console.log("call from parent class") 
   } 
} 
class Child extends Root {} 
class Leaf extends Child   

//indirectly inherits from Root by virtue of inheritance {} 
var obj = new Leaf();
obj.test()

Класс Leaf наследует атрибуты от классов Root и Child на основании многоуровневого наследования.

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

call from parent class

Наследование классов и переопределение методов

Method Overriding- это механизм, с помощью которого дочерний класс переопределяет метод суперкласса. Следующий пример иллюстрирует то же самое -

'use strict' ;
class PrinterClass { 
   doPrint() { 
      console.log("doPrint() from Parent called… ");
   }
}
class StringPrinter extends PrinterClass { 
   doPrint() { 
      console.log("doPrint() is printing a string…"); 
   } 
} 
var obj = new StringPrinter(); 
obj.doPrint();

В приведенном выше примере дочерний класс изменил реализацию функции суперкласса.

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

doPrint() is printing a string…

Супер ключевое слово

ES6 позволяет дочернему классу вызывать член данных родительского класса. Это достигается за счет использованияsuperключевое слово. Ключевое слово super используется для ссылки на непосредственного родителя класса.

Рассмотрим следующий пример -

'use strict' 
class PrinterClass { 
   doPrint() {
      console.log("doPrint() from Parent called…") 
   } 
}  
class StringPrinter extends PrinterClass { 
   doPrint() { 
      super.doPrint() 
      console.log("doPrint() is printing a string…") 
   } 
} 
var obj = new StringPrinter() 
obj.doPrint()

В doPrint()переопределение в классе StringWriter вызывает вызов его версии родительского класса. Другими словами, ключевое слово super используется для вызова определения функции doPrint () в родительском классе - PrinterClass.

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

doPrint() from Parent called. 
doPrint() is printing a string.
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved