Синтаксические классы сахара JavaScript

Автор оригинала: Johnson Ogwuru.

В моей предыдущей статье;

Мы посмотрели на Getter и Setters, поскольку они применяются к объектам в JavaScript, и я вспоминаю, как многие показать нам, как мы могли бы использовать Getters в классах ES6, мы также узнаем о комканах.

Первый из; Я бы не говорил о них по-другому. Мы бы поговорили о классах и пишу некоторые из наших кодов, я бы показать вам, как Gotter используется в кодах.

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

let dog = { name: "lucky", breed: "American Bulldog.", age: 2 }

Они код выше выглядит как то, что мы уже знаем – Объекты Отказ Теперь представьте, что вы владеете Dog WayCare и хотите создать каталог всех собак, которые принадлежат к DayCare, вместо того, чтобы использовать синтаксис выше для каждой собаки, которая присоединяется к детскому обеспечению, который, несомненно, обременительно, мы можем создать Класс для собак Это служит шаблоном для создания новых объектов собаки. Поскольку вы будете спасать себя, они энергию, необходимые для переписывания кода, вы уже написали для конкретной собаки, было бы в безопасности, чтобы сказать, что Классы – отличный способ уменьшить дубликат код и время отладки.

Синтаксис класса:

class Dog{ constructor(){ } method1(){ } method2(){ } }

Ага …. Я получаю вопрос в наших головах, что является конструктором? Написано внутри класса, они называются методами и написаны без Функция ключевое слово.

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

class Dog{ constructor(name,breed){ this.name = name; this.breed = breed; } method1(){ } method2(){ } get method3(){ } }

внутри Конструктор () Метод мы используем это ключевое слово. В контексте класса это относится к экземпляру этого класса.

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

Что такое Методы ? Класс Методы и Добрать Синтаксис такой же, как и для объектов, за исключением того, что вы не можете включать запятыми между методами. Но как мы называем эти методы;

Способ вызовов: Перед тем, как метод называется экземпляр класса, создается и назначен переменной.

const lucky = new Dog('lucky','American Bulldog');

Синтаксис для вызова методов и Getters на экземпляр такой же, как вызывает их на объекте, который выполняется Применение экземпляра с периодом, то свойство или имя метода Отказ Для методов вы также должны включать в себя открытие и закрытие скобок. Но для Getters вам не нужно. В приведенном ниже примере мы бы показали это;

lucky.method1() //when we are calling methods
lucky.method3 //when we are calling getters, no parenthesis

Полный пример класса, конструкторов и вызовов метода мы можем увидеть ниже;

class Dog{ constructor(name,breed){ this._name = name; //when we are using getter and setters we add underscore to our properties. this._breed = breed; this._behaviour = 0; } get name(){ return this._name; } get breed(){ return this._breed; } get behaviour(){ return this._behaviour; } incrementBehaviour(){ this._behaviour++; }
} let lucky = new Dog('lucky','American Bulldog');
console.log(lucky.name)//returns the dogs name
console.log(lucky.breed)//returns the dogs breed
console.log(lucky.behaviour)//return the value of behaviour
lucky.incrementBehaviour(); //increases the count for the behaviour property
console.log(lucky.behaviour)//returns the new value after incrementing.

Но что, если ваш детский сад начинает расти, и мы начинаем принимать другие домашние животные, такие как кошки и т. Д. Мы собираемся создавать разные классы для каждого из них?

class Cat{ constructor(name,breed){ this._name = name; //when we are using getter and setters we add underscore to our properties. this._breed = breed; this._behaviour = 0; } get name(){ return this._name; } get breed(){ return this._breed; } get behaviour(){ return this._behaviour; } incrementBehaviour(){ this._behaviour++; }
} let kitty = new Dog('Kiity','American Bulldog');
console.log(kitty.name)//returns the dogs name
console.log(kitty.breed)//returns the dogs breed
console.log(kitty.behaviour)//return the value of behaviour
kitty.incrementBehaviour(); //increases the count for the behaviour property
console.log(kitty.behaviour)//returns the new value after incrementing.

Это также означало бы нам повторяющиеся коды, то, что мы изначально избегали, но как мы решаем эту проблему, это где мы используем концепцию в классах ES6, называемых Наследование Отказ

Наследование: Когда несколько классов разделяют свойства или методы, они становятся кандидатами на Наследование Отказ Разработчики инструментов используют для уменьшения количества кода, который им нужно написать. С наследством вы можете создать родительский класс (Также известен как Super Class ) со свойствами и методами, которые множественные Детские классы (Известен как Sub Classes ) Доля. Детские классы наследует свойства и методы от своего родительского класса.

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

class Animal{ constructor(name,breed){ this._name = name; //when we are using getter and setters we add underscore to our properties. this._breed = breed; this._behaviour = 0; } get name(){ return this._name; } get breed(){ return this._breed; } get behaviour(){ return this._behaviour; } incrementBehaviour(){ this._behaviour++; }
}

Теперь создать Собака класс, чтобы наследовать от родительского класса Животное ;

class Dog extends Animal{ constructor(name,breed,sound){ super(name,breed); this._sound = sound; } get sound(){ return this._sound; }
} class Cat extends Animal{ constructor(name,breed,size){ super(name,breed); this._size = size; } get size(){ return this._size; }
} let lucky = new Dog('lucky','Caucasian','barks');
console.log(lucky.name); //logs lucky
console.log(lucky.breed); //logs caucasian
console.log(lucky.sound); //logs bark
console.log(lucky.behaviour); //logs current value
lucky.incrementBehaviour(); //increments behaviour
console.log(lucky.behaviour); //logs new value let kitty = new Cat('kitty','dontknow','4kg');
console.log(kitty.name); //logs kitty
console.log(kitty.breed); //logs dontknow
console.log(kitty.size); //logs 4kg
console.log(kitty.behaviour); //logs current value
kitty.incrementBehaviour(); //increments behaviour
console.log(kitty.behaviour); //logs new value

В приведенном выше примере мы создали новые классы, которые расширяется Животное Класс, давайте обращать особое внимание нашим новым ключевым словам, расширяется и супер ;

1. Улучшает ключевое слово делает метод класса животных, доступных внутри кота или класса собачьи.
2. Конструктор, вызванный при создании новой кошки или собаки объекта, принимает три аргумента (имя, породы и звук или размер).
3. Ключевое слово Super называет конструктор родительского класса. В этом случае Супер (имя, породы) передает новый аргумент класса Cat для конструктора класса животных. Когда зрелищность животных работает, он устанавливает Это ._name и Это ._breed = Имя и порода соответственно; Для новой кошки или экземпляра собаки.
4. Звук и Размер Новые свойства уникальны для собаки и кошки соответственно, поэтому мы устанавливаем его в конструктор.

Примечание: Мы называем супер На первой строке конструктора до звонка это Также так, чтобы избежать обратной ошибки JavaScript. Когда мы называем расширяется В объявлении класса все родительские методы становятся доступными для детского класса.

Резюме:

1. Классы шаблоны для объектов
2. JavaScript вызывает метод конструктора, когда мы создаем новый экземпляр класса.