Javascript ООП-1 (Классы и объекты) -…

Здравствуйте, ребята, сегодня я собираюсь обсудить ООП (объектно-ориентированное программирование) в javascript. Это одна из важных концепций в любом языке программирования, которая делает ваш код чище, многократно используемым и безопасным.

Давайте начнем…

Классы —

  • В JavaScript классы — это особый тип функций. Мы можем определять классы так же, как объявления функций и выражения функций.

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

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

Пример —

class Order{
     let orderNo = 1;
     let orderName = "Burger";
    display(){
     return "Order no. - " + orderNo + " " + "Order Name - " + 
     orderName;
    }
}
let object1 = new Order();
console.log(object1.display());
Вход в полноэкранный режим Выход из полноэкранного режима

Выход —

Order no. - 1 Order Name - Burger
Войти в полноэкранный режим Выход из полноэкранного режима

Объяснение —

  • Здесь мы объявили класс «Order» и внутри него создали метод «display()».
  • Затем внутри display мы создали две переменные orderNo со значением 1 и orderName со значением «Burger» и вернули их значение с помощью return statment.
  • Затем мы создали объект класса Order (об объектах мы поговорим после этой темы) и вызвали метод display(), используя созданный нами объект с помощью точечного оператора «.».

Объекты —

  • Объект javaScript — это сущность, имеющая состояние и поведение (свойства и метод).
  • JavaScript является объектно-ориентированным языком. В JavaScript все является объектом.
  • JavaScript основан на шаблонах, а не на классах. Здесь мы не создаем класс для получения объекта. Но мы непосредственно создаем объекты.

  • Существует 3 способа создания объектов
    1 Буквальный объект —

let order = {orderNo : 1 , orderName : "Burger"};
Войти в полноэкранный режим Выход из полноэкранного режима

Выход —

1 Burger
Войти в полноэкранный режим Выход из полноэкранного режима

2 С помощью нового ключевого слова —

let order =  new Object();
order.orderNo = 1;
order.orderName = "Burger";
Ввести полноэкранный режим Выход из полноэкранного режима

Выход —

1 Burger
Ввести полноэкранный режим Выход из полноэкранного режима

3 С помощью конструктора объектов —
Здесь необходимо создать функцию с аргументами. Значение каждого аргумента может быть присвоено в текущем объекте с помощью ключевого слова «this».

function order(orderNo , orderName){
this.orderNo = orderNo;
this.orderName = orderName;
}

newOrder = new order(1 , "Pizza");
Вход в полноэкранный режим Выход из полноэкранного режима

Выход —

1 Pizza
Вход в полноэкранный режим Выход из полноэкранного режима

Объект с классом —

Мы можем создавать объекты классов, поскольку объекты являются экземплярами класса, а класс — это чертеж объектов.

Пример —

class Superhero{
    powers(){
        let heroName = "Superman";
        let superPower = "Super strength , Flying and Heat Vision";

        return "Hero Name - " + heroName + 
" Super Powers - " + superPower; 
    }
}

let Character = new Superhero();
console.log(Character.powers());
Войти в полноэкранный режим Выход из полноэкранного режима

Выход —

Hero Name - Superman 
Super Powers - Super strength , Flying and Heat Vision
Войти в полноэкранный режим Выход из полноэкранного режима
  • Как вы видите, мы создали класс с именем «Superhero», затем создали его объект с помощью ключевого слова new и сохранили его в переменной с именем «Character».

СПАСИБО, ЧТО ПРОЧИТАЛИ ЭТОТ ПОСТ, И ЕСЛИ ВЫ НАШЛИ КАКУЮ-ЛИБО ОШИБКУ ИЛИ ХОТИТЕ ДАТЬ КАКОЕ-ЛИБО ПРЕДЛОЖЕНИЕ, ПОЖАЛУЙСТА, УКАЖИТЕ ЭТО В РАЗДЕЛЕ КОММЕНТАРИЕВ.

Вы можете помочь мне пожертвованием по ссылке ниже Спасибо👇👇👇 ^^.

☕ —> https://www.buymeacoffee.com/waaduheck <—.

Также проверьте эти посты

  1. https://dev.to/shubhamtiwari909/animation-with-react-spring-3k22

  2. https://dev.to/shubhamtiwari909/text-to-speech-in-reactjs-52ml

  3. https://dev.to/shubhamtiwari909/best-vs-code-extensions-for-web-development-2lk3

  4. https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *