Шпаргалка по современному JavaScript

Что такое JavaScript?

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

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

Классы JavaScript

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

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

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

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

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

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

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

// constructor function
function Person () {
    this.name = 'Lakshan';
    this.age = 23;
}
//создание объекта
const person1 = new Person();

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

// создание класса class
class Person {
    constructor(name) {
        this.name = name;
    }
}

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

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

// создание класса
class Person {
    constructor(name) {
        this.name = name;
    }
}
//создание объекта
const person1 = new Person('Petr');
const person2 = new Person('Pavel');

console.info(person1.name); // Petr
console.info(person2.name); // Pavel

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

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

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

// конструктор function
function Person (name) {

// присвоение значений параметров вызывающему объекту
this.name = name;

// определение метода
this.greet = function () {
    return ('Hello' + ' + ' + this.name);
}}

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

class Person {
constructor(name) {
this.name = name;
} 
// определение метода
greet() {
console.info(`Hello ${this.name}`);
}}
let person1 = new Person('Petr');

// обращение к свойству
console.info(person1.name); // Petr

//обращение к методу
person1.greet(); // Hello Petr 

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

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

Методы Getter возвращают значение объекта в JavaScript, а методы Setter возвращают значение объекта.

Геттеры и сеттеры можно найти в классах JavaScript. Для методов getter используется ключевое слово get, а для методов setter - ключевое слово 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('Vally');
console.info(person1.name); // Vally

//изменение значения свойства name
person1.personName = 'Mike';
console.info(person1.name); // Mike 

Поднятие

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

// обращение к классу
const p = new Person(); 
// ReferenceError
//определение класса
class Person {
constructor(name) {
    this.name = name;
}
}

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

'use strict'

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

class Person {
constructor() {
    a = 0;
    this.name = a;
}}
let p = new Person(); // ReferenceError: Can't find variable: a 

Примечание: Класс JavaScript является специальным типом функции. И оператор typeof возвращает функцию для класса.

Например,

Class Person {}

Console.info(typeof Person); // функция

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

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

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

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

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

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

TomJacobMark

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

TomMarkJacob

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

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

Обещания:

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

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

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

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

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

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

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

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

Создание Promise:

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

const myPromise = new Promise((resolve, reject) => { 
// условие}
); 

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

const myFirstPromise = new Promise((resolve, reject) => { 
const condition = true; 
if (condition) {
    setTimeout(function(){
        resolve("Обещание разрешено!"); // выполнено
}, 300);
} else { 
    reject('Обещание отвергнуто! '); 
}}
); 

В приведенном выше Promise, если условие истинно, обещание разрешается, возвращая "Promise is resolved", в противном случае возвращается ошибка "Promise is rejected". Теперь мы создали наш первый Promise, теперь давайте его используем.

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

Для использования созданного выше Promise мы используем then() для resolve и catch() для reject.

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

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

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

demoPromise();

В нашем созданном обещании условие равно "true", и мы вызываем demoPromise(), после чего наш консольный лог читается:

Успех: Обещание выполнено!

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

Ошибка: Обещание отклонено!

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