Вопросы и ответы на собеседования frond-end разработчика Javascript

function Person(){}

var person = Person()
var person = new Person()

[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]

~~3.14

"i'm a lasagna hog".split("").reverse().join("");

( window.foo || ( window.foo = "bar" ) );

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

var foo = [];
foo.push(1);
foo.push(2);

var foo = {};
foo.bar = 'hello';

$(".foo div#bar:eq(0)")

напишите пример замыкания на JavaScript

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

Как известно, в JavaScript областью видимости локальных переменных (объявляемых словом var) является тело функции, внутри которой они определены.

Если вы объявляете функцию внутри другой функции, первая получает доступ к переменным и аргументам последней:

function outerFn(myArg) {
   var myVar;
   function innerFn() {
      //имеет доступ к myVar и myArg
   }
}

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

Рассмотрим пример — функцию, возвращающую кол-во собственных вызовов:

function createCounter() {
   var numberOfCalls = 0;
   return function() {
      return ++numberOfCalls;
   }
}
var fn = createCounter();
fn(); //1
fn(); //2
fn(); //3

В данном примере функция, возвращаемая createCounter, использует переменную numberOfCalls, которая сохраняет нужное значение между ее вызовами (вместо того, чтобы сразу прекратить свое существование с возвратом createCounter).

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

Применение замыканий

Упростим немножко пример выше — уберем необходимость отдельно вызывать функцию createCounter, сделав ее аномимной и вызвав сразу же после ее объявления:

var fn = (function() {
   var numberOfCalls = 0;
   return function() {
      return ++ numberOfCalls;
   }
})();

Такая конструкция позволила нам привязать к функции данные, сохраняющиеся между ее вызовами — это одно из применений замыканий. Иными словами, с помощью них мы можем создавать функции, имеющие свое изменяемое состояние.

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

var createHelloFunction = function(name) {
   return function() {
      alert('Hello, ' + name);
   }
}
var sayHelloHabrahabr = createHelloFunction('Habrahabr');
sayHelloHabrahabr(); //alerts «Hello, Habrahabr»

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

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

Рассмотрим чуть более сложный пример — метод, привязывающий функцию к определенному контексту (т.е. объекту, на который в ней будет указывать слово this).

Function.prototype.bind = function(context) {
   var fn = this;
   return function() {
      return fn.apply(context, arguments);
   };
}
var HelloPage = {
   name: 'Habrahabr',
   init: function() {
      alert('Hello, ' + this.name);
   }
}
//window.onload = HelloPage.init; //алертнул бы undefined, т.к. this указывало бы на window
window.onload = HelloPage.init.bind(HelloPage); //вот теперь все работает

В этом примере с помощью замыканий функция, вощвращаемая bind'ом, запоминает в себе начальную функцию и присваиваемый ей контекст.

Следующее, принципиально иное применение замыканий — защита данных (инкапсуляция). Рассмотрим следующую конструкцию:

(function() {
   …
})();

Очевидно, внутри замыкания мы имеем доступ ко всем внешним данным, но при этом оно имеет и собственные. Благодаря этому мы можем окружать части кода подобной конструкцией с целью закрыть попавшие внутрь локальные переменные от доступа снаружи. (Один из примеров ее использования вы можете увидеть в исходном коде библиотеки jQuery, которая окружает замыканием весь свой код, чтобы не выводить за его пределы нужные только ей переменные).

Есть, правда, одна связанная с таким применением ловушка — внутри замыкания теряется значение слова this за его пределами. Решается она следующим образом:

(function() {
   //вышестоящее this сохранится
}).call(this);

Рассмотрим еще один прием из той же серии. Повсеместно популяризовали его разработчики фреймворка Yahoo UI, назвав его «Module Pattern» и написав о нем целую статью в официальном блоге.

Пускай у нас есть объект (синглтон), содержащий какие-либо методы и свойства:

var MyModule = {
   name: 'Habrahabr',
   sayPreved: function(name) {
      alert('PREVED ' + name.toUpperCase())
   },   
   sayPrevedToHabrahabr: function() {
      this.sayPreved(this.name);
   }
}
MyModule.sayPrevedToHabrahabr();

С помощью замыкания мы можем сделать методы и свойства, которые вне объекта не используютя, приватными (т.е. доступными только ему):

var MyModule = (function() {
   var name = 'Habrahabr';
   function sayPreved() {
      alert('PREVED ' + name.toUpperCase());
   }
   return {
      sayPrevedToHabrahabr: function() {
         sayPreved(name);
      }
   }
})();
MyModule.sayPrevedToHabrahabr(); //alerts «PREVED Habrahabr»

Напоследок хочу описать распространенную ошибку, которая многих вгоняет в ступор в случае незнания того, как работают замыкания. 

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

for (var i = 0; i < links.length; i++) {
   links[i].onclick = function() {
      alert(i);
   }
}

На деле же оказывается, что при клике на любую ссылку выводится одно и то же число — значение links.length. Об этом говорит сайт https://intellect.icu  . Почему так происходит? В связи с замыканием объявленная вспомогательная переменная i продолжает существовать, при чем и в тот момент, когда мы кликаем по ссылке. Поскольку к тому времени цикл уже прошел, i остается равным кол-ву ссылок — это значение мы и видим при кликах.

Решается эта проблема следующим образом:

for (var i = 0; i < links.length; i++) {
   (function(i) {
      links[i].onclick = function() {
         alert(i);
      }
   })(i);
}

Здесь с помощью еще одного замыкания мы «затеняем» переменную i, создавая ее копию в его локальной области видимости на каждом шаге цикла. Благодаря этому все теперь работает как задумывалось.

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

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

Простое описание

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

В этом примере создается внутренняя функция func, изнутри которой доступны как локальные переменные, так и переменные внешней функции outer:

Когда заканчивает работать функция outer, внутренняя функция func остается жить, ее можно запускать в другом месте кода.

Получается, что при запуске func используется переменная уже отработавшей функции outer, т.е самим фактом своего существования, func замыкает на себя переменные внешней функции (а точнее - всех внешних функций).

Наиболее часто замыкания применяются для назначения функций-обработчиков событий:

Эта функция принимает два ID элементов HTML и ставит первому элементу обработчик onclick, который прячет второй элемент.

Т.е,

Здесь динамически созданный обработчик события handler использует targetId из внешней функции для доступа к элементу.

Подробное описание

[[scope]]

Каждое выполнение функции хранит все переменные в специальном объекте с кодовым именем [[scope]], который нельзя получить в явном виде, но он есть .

Каждый вызов var... - всего лишь создает новое свойство этого объекта, а любое упоминание переменной - первым делом ищется в свойствах этого объекта.

Такова внутренняя структура "области видимости" - это обыкновенный объект. Все изменения локальных переменных являются изменениями свойств этого неявного объекта.

Обычно после того, как функция закончила выполнение, ее область видимости[[scope]], т.е весь набор локальных переменных убивается.

Общий поток выполнения выглядит так:

Кстати, для кода вне функции(и вообще глобальных переменных) роль объекта-контейнера [[scope]] выполняет объект window.

Область видимости вложенной функции

Когда одна функция создается внутри другой, то ей передается ссылка на объект с локальными переменными [[scope]] внешней функции.

Благодаря существованию этой ссылки, из внутренней функции можно получить переменные внешней функции - через ссылку на ее [[scope]]. Сначала ищем у себя, затем - во внешнем [[scope]] - и так далее по цепочке до самого объекта window.

Замыкание - это когда объект локальных переменных [[scope]] внешней функции остается жить после ее завершения.

Внутренняя функция может обратиться к нему в любой момент и получить переменную внешней функции.

Например, разберем работу функции, которая устанавливает обработчики событий:

При запуске функции все происходит стандартно:

1. создается [[scope]]
2. туда записываются локальные переменные
3. внутренняя функция получает ссылку на [[scope]]

Но в самом конце - внутренняя функция присваивается sourceNode.onclick. Внешняя функция закончила свою работу, но внутренняя - может запуститься когда-нибудь потом.

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

Вместо этого он просто оставляет весь [[scope]] внешней функции в живых.

Чтобы когда внутренняя функция запустится, если она вдруг не найдет какую-либо переменную в своем [[scope]] - она могла обратиться к [[scope]] внешней функции и нашла бы ее там.

Если внешняя функция была создана внутри еще одной (еще более внешней) функции - то в цепочку добавляется еще один консервированный [[scope]] и так - до глобальной области window.

Пример на понимание

В этом примере внешняя функция makeShout() создает внутреннюю shout().

Функция shout() на правах внутренней функции имеет доступ к переменной phrase. Какое значение она выведет - первое или второе?

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

А вот - подробное описание происходящего в недрах javascript:

1. Внутри makeShout()
   1. создается [[scope]]
   2. В [[scope]] пишется: phrase="Превед!"
   3. В [[scope]] пишется: shout=..функция..
   4. При создании функция shout получает ссылку на [[scope]] внешней функции
   5. [[scope]].phrase меняется на новое значение "Готово!"
2. При запуске shout()
   1. Создается свой собственный объект [[scope2]]
   2. Ищется phrase в [[scope2]] - не найден
   3. Ищется phrase в [[scope]] внешней функции - найдено значение "Готово!"
   4. alert("Готово!")

То есть, внутренняя функция получает последнее значение внешних переменных.

Забавный пример

Замыкание позволяет создать функцию суммирования, которая работает вот так:

Да, именно так: скобки - не опечатки.

А вот и сама функция sum:

Пример ошибочного использования

Функция addEvents принимает массив div'ов и ставит каждому вывод своего номера на onclick.

С вопроса "Почему это не работает?" люди обычно начинают изучение замыканий.

Для тестового примера сделаем 10 разноцветных нумерованных div'ов с разными цветами:

Кнопка ниже создаст 10 дивов и вызовет для них addEvents

Если Вы покликаете на div'ы - они все выдают одинаковый alert.

Такой глюк возник из-за того, что все функции div[i].onclick получают значение iиз одного на всех [[scope]] внешней функции. А это значение ([[scope]].i) на момент активации onclick-обработчика равно 10 (цикл завершился как толькоi==10).

Чтобы все было в порядке, в таких случаях применяют специальный прием - выделение [[scope]]. Следующая функция работает правильно. В ней все то же самое, кроме div.onclick.

Теперь все должно быть в порядке - каждый div дает alert на свой номер.

Для присваивания div.onclick запускается временная функция function(x) {..}, принимающая аргумент x и возвращающая обработчик, который берет x из [[scope]]этой временной функции.

Запись function(x) {..} используется для создания функции, и тут же (i) - для запуска с аргументом i.

Временная функция function(x) {..} заканчивает работать тут же, оставляя в своем [[scope]] правильное значение x, равное текущей переменной i цикла.

Когда обработчик активизируется - alert возьмет из [[scope]] ближайшей внешней функциии правильное значение x.

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

Также про замыкания можно почитать, например в cтатьеhttp://www.jibbering.com/faq/faq_notes/closures.html

Конечно, разобрать происходящее во всех деталях позволит стандарт языка ECMA-262.

Объясните Function.prototype.bind.

Когда вы оптимизируете свой код?

Когда бы вы использовали document.write()?

Основы: замыкания, чем отличается .call() от .apply(), на что указывает this, как работает прототипное наследование.
Знать ECMAScript 5: например Object.create(), Object.defineProperty(), как работают методы вроде .map(),.filter(), .reduce().
Вероятно, надо знать методы работы с элементами страницы, стандарт DOM3, как работать, чтобы не было тормозов.
Как загружается страница, в какой момент исполняются скрипты, как оптимизировать критический путь.AMD и иже с ним.
Асинхронное программирование, промисы. (Особенно, если предполагается разработка на node.js.)
Паттерны проектирования. Возможно, плюсом будет знание фреймворков вроде Backbone.js, Angular.js или React.js, хотя каждый из них есть за что покритиковать.
Профилирование кода.
Ну и примеры своего кода: «покажи свой GitHub»