Класс Javascript: как определить и использовать класс в Javascript

JavaScript — это язык, основанный на прототипах, и каждый объект в JavaScript имеет скрытое внутреннее свойство, называемое [[Prototype]]. JavaScript ECMAScript 5 не имеет типа класса. Таким образом, он не поддерживает полную концепцию объектно-ориентированного программирования, как другие языки программирования, такие как Java или C #. Однако вы можете создать функцию таким образом, чтобы она действовала как класс.

JavaScript ECMAScript 5 Way of Class

В ES5 классы являются функциями.

Давайте посмотрим на следующий пример.

//app.jsfunction Employee (  ) {this.firstName = 'Крунал';  this.lastName = 'Ankit';} var empA = new Employee (); empA.firstName = 'Rushabh'; empA.lastName = 'Dhaval';  console.log (empA.firstName + '' + empA.lastName); var empB = new Employee (); empB.firstName = 'Nehal'; empB.lastName = 'Khushbu'; console.log (empB.firstName + ''  + empB.lastName); 

В приведенном выше примере кода мы создали класс Employee в ES5.

Функция Employee включает переменные firstName, lastName, использующие это ключевое слово. Эти переменные будут действовать как свойства. Как вы знаете, мы можем создать объект любой функции, используя ключевое слово new, поэтому объект empA создается с ключевым словом new. Итак, теперь Employee будет действовать как класс, а empA и empB будут его объектами (экземплярами).

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

Мы запустим программу на узле Платформа .js. См. Вывод ниже.

Добавить Методы в классе ES5

Мы можем добавить выражение функции как переменную-член в функцию в JavaScript. Выражение функции будет действовать как метод класса. См. Следующий пример.

//app.jsfunction Employee () {this.firstName = 'Krunal';  this.lastName = 'Анкит';  this.getFullName = function () {return this.firstName + "" + this.lastName;  }} var empA = new Employee (); empA.firstName = 'Rushabh'; empA.lastName = 'Dhaval';  console.log (empA.getFullName ()); var empB = new Employee (); empB.firstName = 'Nehal'; empB.lastName = 'Khushbu'; console.log (empB.getFullName ()); 

В приведенном выше примере кода мы создали функцию с именем getFullName () внутри класса Employee. .

Теперь мы можем вызвать метод, используя объект, используя нотацию точка (.) . Итак, теперь getFullName () будет действовать как метод класса Employee. Мы можем вызвать метод, используя точечную нотацию, например. empA . getFullName ().

Мы получим точный результат, как в приведенном выше примере.

Конструктор в ES5

В других языках, таких как Java или C #, класс может иметь один или несколько конструкторов. В языке JavaScript функция может иметь один или несколько параметров. Таким образом, функцию с одним или несколькими параметрами можно использовать как конструктор, в котором вы можете передавать значения параметров за раз или создавать объект с новым ключевым словом.

См. Следующий пример.

//app.jsfunction Сотрудник (firstName, lastName) {this.firstName = firstName;  this.lastName = lastName;  this.getFullName = function () {return this.firstName + "" + this.lastName;  }} var empA = новый сотрудник ('Рушабх', 'Дхавал');  console.log (empA.getFullName ()); var empB = new Employee ('Nehal', 'Khushbu'); console.log (empB.getFullName ()); 

В приведенном выше примере , функция Employee включает два параметра: firstName и lastName . Эти параметры используются для установки значений определенного свойства. Результат будет таким же, как в двух приведенных выше примерах. Мы использовали конструктор в js для определения начального значения класса.

Класс Javascript

Теперь перейдем к стиль класса ES6 в Javascript. Классы JavaScript, представленные в ECMAScript 2015 или ES6, в первую очередь являются синтаксическим сахаром по сравнению с JavaScript — существующим наследованием на основе прототипов. Синтаксис класса не вводит новую объектно-ориентированную модель наследования в JavaScript.

Определите класс в Javascript

Один из способов определить класс — использовать объявление класса . Если мы хотим объявить класс, вы используете ключевое слово class с именем класса (здесь «Сотрудник»). См. Приведенный ниже код.

//app.jsclass Employee {constructor (firstName, lastName) {this.firstName = firstName;  this.lastName = lastName;  }} 

В приведенном выше коде мы определили класс и конструктор, который параметризован.

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

Выражения класса

A class expression — еще один способ определения класса.

Выражения класса могут быть именованными или безымянными.

Имя, присвоенное выражению именованного класса, является локальным для тела этого класса.

См. следующий код.

//app.jslet Employee = class {constructor (height, width) {this.height = height;  this.width = width;  }} console.log (Employee.name); 

Приведенный выше код выведет Employee. Имя является свойством класса Employee.

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

Тело класса — это часть, заключенная в фигурные скобки {}. Здесь вы определяете все члены класса, такие как методы или конструкторы.

Строгий режим

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

Конструктор

Метод constructor — это уникальный метод для создания и инициализации объект, созданный с помощью класса . В классе может быть только один уникальный метод с именем « constructor ». Конструктор может использовать ключевое слово super для вызова конструктора суперкласса.

См. Следующий пример.

//app  .jsclass Сотрудник {конструктор (firstName, lastName) {this.firstName = firstName;  this.lastName = lastName;  }//Получатель get name () {return this.fullName ();  }//Метод fullName () {return this.firstName + '' + this.lastName;  }} const e1 = new Employee ('Krunal', 'Lathiya'); console.log (e1.name); 

В приведенном выше примере мы создали конструктор, свойство getter и js метод.

Затем мы создали объект из класса и передаем параметр параметризованному конструктору, а затем используем свойство getter для получения имени из функции name () , а затем отобразите его на консоли.

Обратите внимание на одну вещь: мы назвали name как свойство, а не как метод. Это потому, что получатель — это свойство, а не метод.

Итак, на выходе мы получим имя в консоли. См. Вывод ниже.

Статический методы в классе Javascript

Ключевое слово static определяет статический метод для класса. Статические методы вызываются без создания экземпляра своего класса, и нельзя вызвать через экземпляр класса. Статические методы часто используются для создания служебных функций для приложения.

//app.jsclass Employee {static power (a, b) {return Math.pow (a, b);  }} console.log (Employee.power (8, 2)); 

См. вывод ниже.

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

//app.jsclass Person {constructor (name) {this. name = name;  }} class Employee расширяет Person {constructor (name) {super (name); //вызываем конструктор суперкласса и передаем параметр имени} info () {console.log (`Имя сотрудника: $ {this.name}`);  }} let epl = new Employee ('Krunal'); epl.info (); 

Просмотреть вывод.

Если в подклассе присутствует конструктор, ему необходимо сначала вызвать super (), прежде чем использовать « this». Обратите внимание, что классы не могут расширять обычные (неконструктивные) объекты.

Наконец, Учебное пособие по использованию класса Javascript завершено.

Оцените статью
nanomode.ru
Добавить комментарий