Новичок: "Маста доброе утро. Вчера вы мне основательно запудрили голову  "
Новичок: "Можно еще раз объяснить что происходит в приведенном выше коде?"
Гений: "Добре хлопчик. Слушай сюда  "
Гений: "Начну по порядку. Для удобства я продублирую его здесь, чтобы видеть нумерацию строк нажми третью кнопочку над кодом. Нажал? ОК."
<{CODE_COLLAPSE_ON}><{CODE_COLLAPSE_OFF}><{CODE_WRAP_ON}><{CODE_WRAP_OFF}>function foo() { var x = 5; function bar(callback) { var x = 10; callback(); } bar(function () { console.log(x); }); } foo();
Гений: "Как я уже говорил интерпретатор JS делает два прохода по коду. В первой строчке он видит объявление функции foo и сохраняет его в глобальном скоупе (объект window в броузере), далее он встречает в 14ой строке вызов функции foo() и создает объект контекста исполнения данной функции, в котором сохраняет ссылки на внешние области видимости или говоря по другому объекты переменных, в которых находятся определение локальных переменных. В нашем случае сначала он добавит ссылку на глобальный объект (объект window), а затем создаст локальный объект переменных или объект активации, в который занесет значения и ссылки на локальные переменные и функции, и ссылку на этот объект заносит в контекст. Если посмотреть на наш код, то мы видим тут переменную x и определение функции bar, вот они и сохраняются в нашем объекте активации."
Гений: "Итак что мы имеем на текущий момент?"
Новичок: "Объект контекста, с ссылками на внешние данные или области видимости?  "
Гений: "Точно! Вот этот объект активации и носит название лексической области видимости (lexical environment)"
Гений: "Идем далее. В 9ой строчке мы видим вызов функции bar(), в который передается анонимная функция, напомню интерпретатор все еще выполняет первый этап! Т.е. объявление этой функции заносится в наш объект активации! Но это не простая анонимная функции, она создает замыкание на переменную x, т.е. интерпретатор создает область, которая ссылается на наш объект активации, в котором и находится объявление переменной x!"
Гений: "Скажи какое значение у нас имеет переменная х в объекте активации?"
Новичок: "5!  "
Гений: "Теперь тебе ясно почему в результате в консоле выведет 5."
Гений: "Но продолжаем исследовать. Итак на данном этапе исполнения кода у нас есть все необходимое для выполнения функции foo. Это и делает интерпретатор на втором этапе, собственно выполняет функции foo."
Гений: "Исполнение функции foo приводит повторному циклу интерпретатора, т.е. он снова выполняет два прохода по коду, но уже функции bar"
Гений: "Что то я утомился печатать "
Гений: "Сможешь продолжить?"
Новичок: "ОК  "
Новичок: "Значит так интерпретатор создает новый контекст исполнения, в котором создает объект скоуп, в котором сохраняет ссылку на глобальный объект переменных и объект активации. В объект активации он сохраняет значение переменной x равной 10 и анонимную функцию, значение которого передается через параметр callback. Затем интерпретатор собственно выполняет функцию bar"
Гений: "Верно! Ты все правильно понял  "
Новичок: "Но я не закончил "
Гений: "Продолжай "
Новичок: "Выполнение функции bar проводит к вызову переданной анонимной функции, вызов которой также приводит к созданию нового контекста исполнения. Но поскольку оно образует замыкание ранее интерпретатор создал объект замыкание, в котором сохранил ссылку на объект активации функции foo! Таким образом при выполнении анонимной функции обращение к переменной x оператора console.log(x) будет изъято значение х из объекта активации функции foo, т.е. 5"
Гений: "Браво Новичок! Well done! Аппладирую стоя "
Новичок: "  " |
"
" 
"
"
"