Статические переменные Выполнение скриптов на стороне клиента

Статическая переменная функции — это такая, которая сохраняет значение между вызовами.

Такие переменные есть во многих языках. В JavaScript они не реализованы синтаксически, но можно организовать аналог.

Использование замыкания

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

В примере ниже количество count вызовов функции sayHi сохраняется в обертке:

   
01
var sayHi = (function() {

02
 
03
  var count = 0; // статическая переменная

04
 
05
  return function() {

06
    count++;

07
 
08
    alert("Привет " + count);

09
  };

10
 
11
})();

12
 
13
sayHi(); // Привет 1

14
sayHi(); // Привет 2

Это достаточно хороший способ, но, в качестве альтернативы, рассмотрим еще один.

Запись свойств в функцию

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

Перепишем пример, используя запись в функцию:

   
01
function sayHi() {

02
  sayHi.count++;

03
 
04
  alert("Привет " + sayHi.count);

05
}

06
 
07
sayHi.count = 0; // начальное значение

08
 
09
sayHi(); // Привет 1

10
sayHi(); // Привет 2

Как видно, пример работает также, но внутри все по-другому.

Статическая переменная, записанная как свойство функции — общедоступна. Об этом говорит сайт https://intellect.icu . К ней имеет доступ любой, у кого есть объект функции.

Этим она отличается от привязки через замыкание.

Важность: 3

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

Код счетчика, работающий через замыкание (для переделки):

1
function makeCounter() {

2
  // currentCount можно считать "статической переменной" счетчика 

3
  var currentCount = 0;

4
 
5
  return function() {

6
    currentCount++;

7
    return currentCount;

8
  };

9
}

Важно: счетчики должны быть независимыми:

1
var c1 = makeCounter();

2
var c2 = makeCounter();

3
 
4
alert( c1() ); // 1

5
alert( c2() ); // 1

6
alert( c1() ); // 2

Решение

Переписанный счетчик:

   
01
function makeCounter() {

02
  return function f() {

03
    if (!f.currentCount) {

04
      f.currentCount = 0;

05
    }

06
 
07
    return ++f.currentCount;

08
  };

09
}

10
 
11
var c1 = makeCounter();

12
var c2 = makeCounter();

13
 
14
alert( c1() ); // 1

15
alert( c2() ); // 1

16
alert( c1() ); // 2

Побочный эффект — текущее значение счетчика теперь доступно снаружи через свойство функции:

1
var counter = makeCounter();

2
 
3
counter();

4
alert( counter.currentCount ); // 1

К сожалению, в одной статье не просто дать все знания про статические переменные. Но я - старался. Если ты проявишь интерес к раскрытию подробностей,я обязательно напишу продолжение! Надеюсь, что теперь ты понял что такое статические переменные и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Статические переменные

Использование замыкания

Запись свойств в функцию

Комментарии

Оставить комментарий

Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Термины: Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)