MYSQL
PHP
HTML
CSS
JS

Замыкания в Javascript

Замыкания в Javascript - ситуации, при которых функция возвращает другую функцию (или даже саму себя). Они помогают скрыть реализацию функций, а также строить более сложные, динамические вызовы функций. Для простого сокрытия реализации используется такая система:
?
1
2
3
4
5
function library (a, b) {
    return a + b;
}
 
function sum(a, b) { return library(a, b) }
Пользователь функции sum может и не знать, как считаются числа a и b. Ему не придется видеть громоздкие вычисления. Также вернуть можно и вложенную в библиотеку функцию.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
function summator (a) {
    return function(b) { a + b };
}
  
//Вызов выглядит так:
alert(summator(3)(2));
//Результат: 5
 
//Преимущество такой записи в реиспользовании:
var addThree = summator(3);
 
alert(addThree(25)); // 28
alert(addThree(11)); // 14
Тоже хорошей идеей будет спрятать реализацию класса в его прототип. А замыкание сделать собственной функцией, для возможного множественного вызова функций.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function MathLib(initVal) {
  var result = initVal || 0;
 
  this.result = function () { return result };
 
  this.add = function (val) {
     if (typeof val !== 'undefined') {
        result = this.sum(result, val);
     }
 
     return this;
  };
 
  this.sub = function (val) {
     if (typeof val !== 'undefined') {
        result = this.subtract(result, val);
     }
 
     return this;
  };
}
 
MathLib.prototype = new function MathLibPrototype() {
  this.sum = function (a, b) {
    return a + b;
  }
 
  this.subtract = function (sub) {
    return a - b;
  }
}
 
function math(initVal) {
   return new MathLib(initVal);
}
Основная функция (оболочка) math будет содержать ссылку на объект библиотеки. Код библиотеки будет красив, локоничен, а её функции будут перечислены в прототипе. Плюс такой вид замыкания позволит пользоваться одним вызовом библиотеки и множественном вызове её функций для того же контекста. Например:
?
1
2
3
4
5
6
7
8
9
10
11
math(4).result();
// вывод : result = 4
 
math(3).add(3).result();
// вывод : result = 6
 
math(4).add(3).result();
// вывод : result = 7
 
math(3).add(3).sub(1).result();
// вывод : result = 5 = 3+3-1
Количество вызовов функций почти неограничено, и для одного первоначального набора вводных данных можно проделать большой объем различной работы. Так длина конечного кода для пользователя будет сокращена до одной строчки, а процесс написания кода более результативным. P.S. Такой подход используется в реализации функций библиотеки jQuery. Замыкание функции на себе, позволяет выполнять несколько разнотипных действий при вызове лишь одного селектора $ (называется чейнинг (от англ. chaining - формирование цепочки)). Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru

Случайные уроки по этой теме:

Расположение элемента JS динамически Исключения в JS. try catch Блог на ReactJS #3. Redux, Middleware, json-server, fetch Рисование и вращение изображения в Canvas Cookie в JS
↑