К решению

[[Scope]] для new Function

Присвоение [[Scope]] для new Function

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

При создании функции с использованием new Function, её свойство [[Scope]]ссылается не на текущий LexicalEnvironment, а на window.

Пример

Следующий пример демонстрирует как функция, созданная new Function, игнорирует внешнюю переменную aи выводит глобальную вместо неё:

var a = 1;

function getFunc() { var a = 2;

var func = new Function('', 'alert(a)');

return func;

}

getFunc()(); // 1, из window

Сравним с обычным поведением:

var a = 1;

function getFunc() { var a = 2;

var func = function() { alert(a); };

return func;

}

getFunc()(); // 2, из LexicalEnvironment функции getFunc

Почему так сделано?

Продвинутые знания

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

Эта особенность new Function, хоть и выглядит странно, на самом деле весьма полезна.

Представьте себе, что нам действительно нужно создать функцию из строки кода. Текст кода этой функции неизвестен на момент написания скрипта (иначе зачем new Function), но станет известен

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

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

Но проблема в том, что JavaScript при выкладывании на «боевой сервер» предварительно сжимается минификатором — специальной программой, которая уменьшает размер кода, убирая из него лишние комментарии, пробелы, что очень важно — переименовывает локальные переменные на более короткие.

То есть, если внутри функции есть var userName, то минификатор заменит её на var a(или другую

букву, чтобы не было конфликта), предполагая, что так как переменная видна только внутри функции, то этого всё равно никто не заметит, а код станет короче. И обычно проблем нет.

…Но если бы new Functionмогла обращаться к внешним переменным, то при попытке доступа к userNameв сжатом коде была бы ошибка, так как минификатор переименовал её.

Получается, что даже если бы мы захотели использовать локальные переменные в new Function, то после сжатия были бы проблемы, так как минификатор переименовывает локальные переменные.

Описанная особенность new Functionпросто-таки спасает нас от ошибок.

Ну а если внутри функции, создаваемой через new Function, всё же нужно использовать какие-то

данные — без проблем, нужно всего лишь предусмотреть соответствующие параметры и передавать их явным образом, например так:

var sum = new Function('a, b', ' return a + b; '); var a = 1, b = 2;

alert( sum(a, b) ); // 3

Итого

●Функции, создаваемые через new Function, имеют значением [[Scope]]не внешний объект переменных, а window.

●Следствие — такие функции не могут использовать замыкание. Но это хорошо, так как бережёт от ошибок проектирования, да и при сжатии JavaScript проблем не будет. Если же внешние переменные реально нужны — их можно передать в качестве параметров.

Локальные переменные для объекта

Замыкания можно использовать сотнями способов. Иногда люди сами не замечают, что использовали замыкания — настолько это просто и естественно.

●set(value)— поставить значение.

●reset()— обнулить счётчик.

Все они получают ссылку [[Scope]]на текущий (внешний) объект переменных. Поэтому вызов любого из этих методов будет получать или модифицировать одно и то же внешнее значение

currentCount.

Объект счётчика + функция

Изначально, счётчик делался функцией во многом ради красивого вызова: counter(), который увеличивал значение и возвращал результат.

К сожалению, при переходе на объект короткий вызов пропал, вместо него теперь counter.getNext(). Но он ведь был таким простым и удобным…

Поэтому давайте вернём его!

function makeCounter() { var currentCount = 1;

//возвращаемся к функции function counter() {

return currentCount++;

}

//...и добавляем ей методы! counter.set = function(value) {

currentCount = value; };

counter.reset = function() { currentCount = 0;

};

return counter;

}

var counter = makeCounter();

alert( counter() ); // 1 alert( counter() ); // 2

counter.set(5);

alert( counter() ); // 5

Красиво, не правда ли? Получился полноценный объект, который можно вдобавок ещё и вызывать.

Этот трюк часто используется при разработке JavaScript-библиотек. Например, популярная библиотека jQuery предоставляет глобальную переменную с именем jQuery (доступна также под коротким именем $), которая с одной стороны является функцией и может вызываться как

jQuery(...), а с другой — у неё есть различные методы, например jQuery.type(123)возвращает тип аргумента.

Задачи на понимание замыканий

Задачи

Сумма через замыкание

важность: 4

Напишите функцию sum, которая работает так: sum(a)(b) = a+b.

Да, именно так, через двойные скобки (это не опечатка). Например:

sum(1)(2) = 3 sum(5)( 1) = 4

К решению

Функция – строковый буфер

важность: 5

В некоторых языках программирования существует объект «строковый буфер», который аккумулирует внутри себя значения. Его функционал состоит из двух возможностей:

1.Добавить значение в буфер.

2.Получить текущее содержимое.

Задача — реализовать строковый буфер на функциях в JavaScript, со следующим синтаксисом:

●Создание объекта: var buffer = makeBuffer();.

●Вызов makeBufferдолжен возвращать такую функцию buffer, которая при вызове buffer(value) добавляет значение в некоторое внутреннее хранилище, а при вызове без аргументов buffer()

— возвращает его.

Вот пример работы:

function makeBuffer() { /* ваш код */ }

var buffer = makeBuffer();

//добавить значения к буферу buffer('Замыкания'); buffer(' Использовать'); buffer(' Нужно!');

//получить текущее значение

alert( buffer() ); // Замыкания Использовать Нужно!

Буфер должен преобразовывать все данные к строковому типу: