Сложная часть JavaScript

Недавно изучил некоторые основные концепции от FrontendMasters. Мы можем получить бесплатную подписку на 6 месяцев в FrontendMasters, используя github student developer pack.

1. Принципы JavaScript

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

2. Обратные вызовы и функции высшего порядка

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

function copyArrayAndManipulate(array, instructions) {
 const output = [];
 for (let i = 0; i < array.length; i++) {
 output.push(instructions(array[i]));
 }
 return output;
}
function multiplyBy2(input) {return input * 2;}
const result = copyArrayAndManipulate([1, 2, 3], multiplyBy2);

Внешняя функция, которая принимает функцию, является нашей функцией высшего порядка.

function copyArrayAndManipulate(array, instructions) {
 const output = [];
 for (let i = 0; i < array.length; i++) {
 output.push(instructions(array[i]));
 }
 return output;
}

Функция, которую мы вставляем, является нашей функцией обратного вызова.

function multiplyBy2(input) {return input * 2;}

3. Закрытие (область действия и контекст выполнения)

Когда наши функции вызываются, мы создаем живое хранилище данных (локальная память/переменная среда/состояние) для контекста выполнения этой функции.

function outer (){
 let counter = 0;
 function incrementCounter (){ counter ++; }
 return incrementCounter;
}
const myNewFunction = outer();
myNewFunction();
myNewFunction();

Когда функция определена, она получает связь с окружающей локальной памятью («переменная среда»), в которой она была определена.

Мы возвращаем код incrementCounter (определение функции) из внешнего в глобальный и даем ему новое имя — myNewFunction.

Мы поддерживаем связь с активной локальной памятью external — она «возвращается», присоединяясь к задней части определения функции incrementCounter.

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

Когда мы запускаем myNewFunction в глобальном масштабе, сначала он будет искать в своей собственной локальной памяти (как мы и ожидали), а затем в «рюкзаке» myNewFunction.

4. Обещания, асинхронный JavaScript и цикл событий

I. Функция асинхронности, делающая возможными динамические веб-приложения.

II. Обещания — самая важная функция ES6

function display(data){
 console.log(data)
}

const futureData = fetch('https://twitter.com/will/tweets/1')
futureData.then(display);

console.log("Me first!");

Синтаксис обещания

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Асинхронный синтаксис

Ключевое слово await можно использовать только внутри функции async.

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

async function myDisplay() {
  let myPromise = new Promise(function(resolve, reject) {
    resolve("I love You !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();

III. Цикл событий — сортировка JavaScript

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

(i)Стек вызовов

JavaScript отслеживает, какая функция выполняется в данный момент (где находится поток выполнения). Запуск функции, добавление в стек вызовов. Завершение выполнения функции, JS удаляет ее из стека вызовов. Независимо от того, что находится на вершине стека вызовов, это функция, которую мы сейчас выполняем.

(ii)Веб-API

Веб-API имеет методы и свойства, которые могут расширить функциональные возможности браузера. Пример setTimeOut(), fetch(), checkValidity() и т. д.

(iii)Очередь обратного вызова и очередь микрозадач

Очередь обратного вызова — это очередь задач, которые выполняются после текущей задачи. Очередь обратного вызова обрабатывается движком JavaScript после того, как он выполнил все задачи в очереди микрозадач. Обещания JavaScript и API-интерфейс Mutation Observer используют очередь микрозадач для выполнения своих обратных вызовов.

Прочтите статью ниже для лучшего понимания.

Микрозадачи и (макросы)задачи в цикле событий
JavaScript имеет модель параллелизма, основанную на цикле событий, который отвечает за выполнение кода, сбор и… среда.com

5. Классы и прототипы (ООП)

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

class UserCreator {
 constructor (name, score){
 this.name = name;
 this.score = score;
 }
 increment (){ this.score++; }
 login (){ console.log("login"); }
}
const user1 = new UserCreator("Eva", 9);
user1.increment();

Наследование прототипа

Все объекты JavaScript наследуют свойства и методы от прототипа:

Date объекты наследуются от Date.prototype
Array объекты наследуются от Array.prototype
Person объекты наследуются от Person.prototype

Object.prototype находится на вершине цепочки наследования прототипов:

Объекты Date, объекты Array и объекты Person наследуются от Object.prototype.

Свойство JavaScript prototype позволяет добавлять новые свойства в конструкторы объектов.

Синтаксис

function userCreator(name, score){
 this.name = name;
 this.score = score;
}

userCreator.prototype.increment = function(){ this.score++; };
userCreator.prototype.login = function(){ console.log("login"); };

const user1 = new userCreator(“Eva”, 9)
user1.increment()

__прото__

Это фактический объект, который позволяет наследовать свойства JavaScript с помощью объекта, созданного с помощью new. Каждый объект со связанным поведением имеет внутреннее свойство [[prototype]]