JavaScript

Что такое JavaScript?

JavaScript (js) — это легкий объектно-ориентированный язык программирования, который используется для написания сценариев веб-страниц рядом веб-сайтов. Применительно к HTML-документу это интерпретируемый полнофункциональный язык программирования, обеспечивающий динамическую интерактивность на веб-сайтах. Впервые он был выпущен в 1995 году, чтобы пользователи могли добавлять программы на веб-страницы в браузере Netscape Navigator. С тех пор все другие графические веб-браузеры приняли его. Пользователи могут использовать JavaScript для создания современных веб-приложений, которые взаимодействуют мгновенно, без необходимости каждый раз перезагружать страницу. Js используется на стандартном веб-сайте для обеспечения многих видов интерактивности и простоты.

Особенности JavaScript

Классы JavaScript

Одной из новых функций версии JavaScript ES6 являются классы.

Класс — это план объекта. Класс можно использовать для создания объекта.

Рассмотрим класс как грубый набросок (прототип) дома. Он охватывает всю информацию, касающуюся полов, дверей и окон, среди прочего. Вы строите дом на основе этих описаний. Объект - дом.

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

Создание класса JavaScript

Класс JavaScript — это синтаксический сахар, аналог функции-конструктора JavaScript.

Функция конструктора определяется как:

// constructor function
function Person () {
    this.name = 'Lakshan',
    this.age = 23
}

// create an object
const person1 = new Person();

Вместо использования ключевого слова function вы используете ключевое слово class для создания классов JS. Например,

// creating a class
class Person {
  constructor(name) {
    this.name = name;
  }
}

Ключевое слово class используется для создания класса. Свойства назначаются в функции-конструкторе.

Теперь вы можете создать объект. Например,

// creating a class
class Person {
  constructor(name) {
    this.name = name;
  }
}

// creating an object
const person1 = new Person('Kavindu');
const person2 = new Person('Lakshan');

console.log(person1.name); // Kavindu
console.log(person2.name); // Lakshan

Здесь person1 и person2 являются объектами класса Person.

Примечание. Метод constructor() внутри класса вызывается автоматически каждый раз при создании объекта.

При использовании функции конструктора вы определяете методы как:

// constructor function
function Person (name) {

   // assigning  parameter values to the calling object
    this.name = name;

    // defining method
    this.greet = function () {
        return ('Hello' + ' ' + this.name);
    }
}

В классе JavaScript легко определить методы. Вы просто указываете имя метода, за которым следует (). Например,

class Person {
    constructor(name) {
    this.name = name;
  }

    // defining method
    greet() {
        console.log(`Hello ${this.name}`);
    }
}

let person1 = new Person('Lakshan');

// accessing property
console.log(person1.name); // Lakshan

// accessing method
person1.greet(); // Hello Lakshan

Примечание. Чтобы получить доступ к методу объекта, вам нужно вызвать метод, используя его имя, за которым следует ().

Геттеры и сеттеры

Методы-получатели возвращают значение объекта в JavaScript, а методы-установщики возвращают значение объекта.

Геттеры и сеттеры можно найти в классах JavaScript. Для методов получения вы используете ключевое слово get, а для методов установки вы используете ключевое слово set. В качестве примера,

class Person {
    constructor(name) {
        this.name = name;
    }

    // getter
    get personName() {
        return this.name;
    }

    // setter
    set personName(x) {
        this.name = x;
    }
}

let person1 = new Person('Pinky');
console.log(person1.name); // Pinky

// changing the value of name property
person1.personName = 'Shehan';
console.log(person1.name); // Shehan

Подъем

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

// accessing class
const p = new Person(); // ReferenceError

// defining class
class Person {
  constructor(name) {
    this.name = name;
  }
}

Как видите, обращение к классу до его определения приводит к ошибке.

«использовать строгий»

За use-strict обычно следуют классы. Весь код в классе по умолчанию настроен на строгий режим. В качестве примера,

class Person {
  constructor() {
    a = 0;
    this.name = a;
  }
}

let p = new Person(); // ReferenceError: Can't find variable: a

Примечание. Класс JavaScript — это особый тип функции. А оператор typeof возвращает function для класса.

Например,

class Person {}
console.log(typeof Person); // function

Обратные вызовы:

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

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

Возьмите эту функцию обратного вызова в качестве примера:

function printString(){
   console.log("Tom"); 
   setTimeout(function()  { console.log("Jacob"); }, 300); 
  console.log("Mark")
}

printString();

Если бы это был код синхронизации, мы бы столкнулись со следующим выводом.

Tom
Jacob
Mark

Но setTimeout является асинхронной функцией, тогда вывод приведенного выше кода будет таким:

Tom
Mark
Jacob

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

Другими словами, функция сообщения вызывается после того, как что-то произошло (в этом примере прошло 3 секунды), но не раньше. Таким образом, обратный вызов — это функция, которая передается в качестве аргумента setTimeout.

Обещания:

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

Обещание имеет два исхода: оно либо будет выполнено, либо не будет выполнено, когда придет время.

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

Промис используется для обработки асинхронного результата операции. JavaScript предназначен для того, чтобы другие синхронные части кода могли выполняться, не дожидаясь завершения асинхронного блока кода. Мы можем использовать обещания, чтобы отложить выполнение блока кода до завершения асинхронного запроса. В результате другие операции могут продолжаться непрерывно.

Состояния обещаний:

Прежде всего, Promise — это объект. Существует 3 состояния объекта Promise:

• Ожидание: начальное состояние до того, как обещание будет успешным или неудачным.
• Решено: выполнено обещание
• Отклонено: невыполненное обещание, выдать ошибку

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

Создание обещания:

Во-первых, мы используем конструктор для создания объекта Promise. Обещание имеет два параметра: один для успеха (разрешение) и один для отказа (отклонение):

const myPromise = new Promise((resolve, reject) => {  
    // condition
});

Давайте создадим обещание:

const myFirstPromise = new Promise((resolve, reject) => { 
    const condition = true;   
    if(condition) {
         setTimeout(function(){
             resolve("Promise is resolved!"); // fulfilled
        }, 300);
    } else {    
        reject('Promise is rejected!');  
    }
});

В приведенном выше обещании, если условие истинно, разрешить обещание, возвращающее «Обещание разрешено», в противном случае вернуть ошибку «Обещание отклонено». Теперь мы создали наш первый промис, теперь давайте его используем.

Использование Promise:

Чтобы использовать обещание создания выше, мы используем then() для разрешения и catch() для отклонения.

myFirstPromise
.then((successMsg) => {
    console.log(successMsg);
})
.catch((errorMsg) => { 
    console.log(errorMsg);
});

давайте сделаем еще один шаг:

const demoPromise= function() {
  myFirstPromise
  .then((successMsg) => {
      console.log("Success:" + successMsg);
  })
  .catch((errorMsg) => { 
      console.log("Error:" + errorMsg);
  })
}

demoPromise();

В нашем созданном промисе условие «истинно», и мы вызываем demoPromise(), после чего наши журналы консоли читают:

Success: Promise is resolved!

Поэтому, если промис будет отклонен, он перейдет к методу catch(), и на этот раз мы увидим другое сообщение на консоли.

Error: Promise is rejected!

Надеюсь, эта статья даст вам фундаментальные знания о JavaScript, которые нужны каждому разработчику в нынешнюю эпоху 😆

Спасибо, что прочитали, и я надеюсь, что сегодня вы узнали что-то новое :)

~ Кавинду Лакшан