Лучший учебник, чтобы стать мастером в закрытии JavaScript

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

Если вы готовитесь к собеседованию на должность среднего звена в какой-либо компании, то это один из любимых вопросов для javascript-разработчиков. Такие компании, как Amazon, Google, Apple, также задавали очень много проблем, связанных с замыканиями JavaScript. Так что это самые важные темы в JavaScript.

Если у вас есть страх замыкания в JS, то после прочтения этой статьи вы станете мастером замыкания Js. 🙂

Что такое замыкание в JavaScript

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

Замыкание — это функция, которая имеет доступ к своей родительской области даже после закрытия родительской области.

Выше строка говорит, что такое закрытие в javascript, но что означают эти строки? Давайте разберем значение этой строки в деталях на паре примеров.

Все мы знаем, что всякий раз, когда мы создаем функцию в javascript, она имеет доступ к локальным и глобальным переменным. Переменные, созданные внутри функции, называются локальными переменными, а переменные, созданные вне функции, называются глобальными переменными.

function example(){ 
   let x = 3;
   console.log(x); 
} 
example(); // 3 console.log(x); // Uncaught ReferenceError: x is not defined

В приведенном выше коде мы создали функцию с именем и внутри этой функции создали переменную с именем x и присвоили ей значение.

Когда вы вызываете функцию, она регистрирует значение, но когда вы вызываете переменную внутри этой функции, мы получаем ошибку ссылки. Это связано с тем, что x имеет локальную область действия с примером функции и недоступен за пределами этой функции.

Теперь возьмите другой код, в котором мы определяем x как глобальную переменную, как показано ниже.

let x = 3; 
function example(){ 
   console.log(x); 
} 
example(); // 3 console.log(x); // 3

В приведенном выше коде мы определяем x как глобальную переменную, и когда мы вызываем функцию example() и регистрируем x, мы получаем оба значения.

Эти два кода просты и не требуют пояснений, но подумайте, что произойдет, если мы добавим другую функцию в функцию example(), которая выполняет другую задачу. У вас нет идей? Давайте узнаем это, и тогда мы получим четкую концепцию замыкания в javascript.

В приведенных выше двух примерах мы получим один и тот же вывод 4. Похоже, вы запутались, как это возможно, тогда посмотрите определение закрытия javascript, которое вы прочитали несколько минут назад в приведенных выше строках.

Это все из-за эффекта закрытия javascript.

Давайте лучше разберемся с закрытием javascript на другом примере.

function Counter() { 
    let counter = 0; 
    return function IncreaseCounter() { 
        return counter += 1; 
     }; 
} 
let count = Counter(); console.log(count()); // 1 console.log(count()); // 2 console.log(count()); // 3 console.log(count()); // 4

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

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

Почему мы используем замыкание в JavaScript

Хороший разработчик всегда хочет, чтобы его код соответствовал стандарту кодирования и был прост в использовании, упрощая повседневную работу. Для разработчиков javascript замыкание — один из тех навыков, которые заставляют их работать на продвинутом уровне кодирования, а затем могут повысить их производительность.

Ниже приведены некоторые случаи, когда закрытие экономит много времени разработчику JavaScript.

Инкапсуляция данных

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

let person = (function () { 
    let fullName = "sachin jaiswal"; 
    return { 
        setFullName : function (newValue) { 
            fullName = newValue; 
         }, 
    
        getFullName : function () {
            return fullName;
        } 
     }; // end of the return 
}());

В приведенном выше коде мы инкапсулируем переменную fullName с помощью замыкания. В этом коде мы возвращаем две функции setFullName и getFullName, которые используются для установки нового имени и получения имя человека соответственно.

Если вы попытаетесь использовать person.fullName, это приведет к неопределенной ошибке.

Анимация элемента DOM

Допустим, у вас есть элемент DOM, значение которого увеличивается с заданным интервалом времени. Затем вы можете легко сделать это, используя закрытие javascript.

let count = 0; 
let p = createP(count); // Call countIt every 1 seconds setInterval(incrementCount, 1000); // Increase the count and set the new content function incrementCount() { count++; p.html(count); }

В чем преимущество использования замыкания в JavaScript

Есть много преимуществ использования закрытия в javascript. Всякий раз, когда вы создаете новую функцию в javascript, она автоматически создает закрытие.

Замыкание позволяет легко следовать объектно-ориентированному стилю программирования в JavaScript. Вы можете легко создать класс, инкапсулировать данные и легко делать другие вещи.

Вывод

Надежда, теперь у вас есть четкое представление о закрытии. Это несложно понять, но вам нужно изучить различные функции замыкания и область действия функции, чтобы стать мастером замыкания javascript.

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

Если вы хотите узнать об этом больше, я рекомендую вам прочитать Официальные документы MDN или вы можете пройти любые курсы на лучших онлайн-сайтах для обучения веб-разработке, таких как Codecademy, Udemy. , Coursera, SimpliLearn.

Если у вас есть какие-либо сомнения и предложения, дайте мне знать в разделе комментариев. И если вам понравилась эта статья, пожалуйста, поделитесь ею.

Первоначально опубликовано на https://codesquery.com 3 августа 2019 г.

Лучший учебник, чтобы стать мастером в закрытии JavaScript — CodesQuery