Javascript scope with this

Всё, что вы хотели знать об областях видимости в JavaScript (но боялись спросить)

У JS есть несколько концепций, связанных с областью видимости (scope), которые не всегда ясны начинающим разработчикам (и иногда даже опытным). Эта статья посвящена тем, кто стремится погрузиться в пучину областей видимости JS, услышав такие слова, как область видимости, замыкание, “this”, область имён, область видимости функции, глобальные переменные, лексическая область видимости, приватные и публичные области… Надеюсь, по прочтению материала вы сможете ответить на следующие вопросы:

— что такое область видимости?
— что есть глобальная/локальная ОВ?
— что есть пространство имён и чем оно отличается от ОВ?
— что обозначает ключевое слово this, и как оно относится с ОВ?
— что такое функциональная и лексическая ОВ?
— что такое замыкание?
— как мне всё это понять и сотворить?

Что такое область видимости?

В JS область видимости – это текущий контекст в коде. ОВ могут быть определены локально или глобально. Ключ к написанию пуленепробиваемого кода – понимание ОВ. Давайте разбираться, где переменные и функции доступны, как менять контекст в коде и писать более быстрый и поддерживаемый код (который и отлаживать быстрее). Разбираться с ОВ просто – задаём себе вопрос, в какой из ОВ мы сейчас находимся, в А или в Б?

Что есть глобальная/локальная ОВ?

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

// глобальная ОВ var name = 'Todd'; 

Глобальная ОВ – ваш лучший друг и худший кошмар. Обучаясь работе с разными ОВ, вы не встретите проблем с глобальной ОВ, разве что вы увидите пересечения имён. Часто можно услышать «глобальная ОВ – это плохо», но нечасто можно получить объяснение – почему. ГОВ – не плохо, вам нужно её использовать при создании модулей и API, которые будут доступны из разных ОВ, просто нужно использовать её на пользу и аккуратно.

Все мы использовали jQuery. Как только мы пишем

мы получаем доступ к jQuery в глобальной ОВ, и мы можем назвать этот доступ пространством имён. Иногда термин «пространство имён» используют вместо термина ОВ, однако обычно им обозначают ОВ самого уровня. В нашем случае jQuery находится в глобальной ОВ, и является нашим пространством имён. Пространство имён jQuery определено в глобальной ОВ, которая работает как ПИ для библиотеки jQuery, в то время как всё её содержимое наследуется от этого ПИ.

Что такое локальная ОВ?

Локальной ОВ называют любую ОВ, определённую после глобальной. Обычно у нас есть одна ГОВ, и каждая определяемая функция несёт в себе локальную ОВ. Каждая функция, определённая внутри другой функции, имеет своё локальное ОВ, связанное с ОВ внешней функции.

Если я определю функции и задам внутри переменные, они принадлежат локальной ОВ. Пример:

// ОВ A: глобальная var myFunction = function () < // ОВ B: локальная >; 

Все переменные из ЛОВ не видны в ГОВ. К ним нельзя получить доступ снаружи напрямую. Пример:

var myFunction = function () < var name = 'Todd'; console.log(name); // Todd >; // ReferenceError: name is not defined console.log(name); 

Переменная “name” относится к локальной ОВ, она не видна снаружи и поэтому не определена.

Функциональная ОВ.

Все локальные ОВ создаются только в функциональных ОВ, они не создаются циклами типа for или while или директивами типа if или switch. Новая функция – новая область видимости. Пример:

// ОВ A var myFunction = function () < // ОВ B var myOtherFunction = function () < // ОВ C >; >; 

Так просто можно создать новую ОВ и локальные переменные, функции и объекты.

Лексическая ОВ

Если одна функция определена внутри другой, внутренняя имеет доступ к ОВ внешней. Это называется «лексической ОВ», или «замыканием», или ещё «статической ОВ».

var myFunction = function () < var name = 'Todd'; var myOtherFunction = function () < console.log('My name is ' + name); >; console.log(name); myOtherFunction(); // вызов функции >; // Выводит: // `Todd` // `My name is Todd` 

С лексической ОВ довольно просто работать – всё, что определено в ОВ родителя, доступно в ОВ ребенка. К примеру:

var name = 'Todd'; var scope1 = function () < // name доступно здесь var scope2 = function () < // name и здесь var scope3 = function () < // name и даже здесь! >; >; >; 

В обратную сторону это не работает:

// name = undefined var scope1 = function () < // name = undefined var scope2 = function () < // name = undefined var scope3 = function () < var name = 'Todd'; // локальная ОВ >; >; >; 

Всегда можно вернуть ссылку на “name”, но не саму переменную.

Последовательности ОВ

Последовательности ОВ определяют ОВ любой выбранной функции. У каждой определяемой функции есть своя ОВ, и каждая функция, определяемая внутри другой, имеет свой ОВ, связанный с ОВ внешней – это и есть последовательность, или цепочка. Позиция в коде определяет ОВ. Определяя значение переменной, JS идёт от самой глубоко вложенной ОВ наружу, пока не найдёт искомую функцию, объект или переменную.

Замыкания

Живут в тесном союзе с лексическими ОВ. Хорошим примером использования является возврат ссылки на функцию. Мы можем возвращать наружу разные ссылки, которые делают возможным доступ к тому, что было определено внутри.

var sayHello = function (name) < var text = 'Hello, ' + name; return function () < console.log(text); >; >; 

Чтобы вывести на экран текст, недостаточно просто вызвать функцию sayHello:

Функция возвращает функцию, поэтому её надо сначала присвоить, а потом вызвать:

var helloTodd = sayHello('Todd'); helloTodd(); // вызывает замыкание и выводит 'Hello, Todd' 

Можно конечно вызвать замыкание и напрямую:

sayHello('Bob')(); // вызывает замыкание без присваивания 

В AngularJS используются подобные вызовы в методеs $compile, где нужно передавать ссылку на текущую ОВ:

Можно догадаться, что упрощённо их код выглядит примерно так:

var $compile = function (template) < // всякая магия // без доступа к scope return function (scope) < // здесь есть доступ и к `template` и к `scope` >; >; 

Функция не обязана ничего возвращать, чтобы быть замыканием. Любой доступ к переменным извне текущей ОВ создаёт замыкание.

ОВ и ‘this’

Каждая ОВ назначает своё значение переменной “this”, в зависимости от способа вызова функции. Мы все использовали ключевое слово this, но не все понимают, как оно работает и какие есть отличия при вызовах. По умолчанию, оно относится к объекту самой внешней ОВ, текущему окну. Пример того, как разные вызовы меняют значения this:

var myFunction = function () < console.log(this); // this = глобальное, [объект Window] >; myFunction(); var myObject = <>; myObject.myMethod = function () < console.log(this); // this = текущий объект < myObject >>; var nav = document.querySelector('.nav'); // var toggleNav = function () < console.log(this); // this = элемент >; nav.addEventListener('click', toggleNav, false); 

Встречаются и проблемы со значением this. В следующем примере внутри одной и той же функции значение и ОВ могут меняться:

 var nav = document.querySelector('.nav'); // var toggleNav = function () < console.log(this); // element setTimeout(function () < console.log(this); // [объект Window] >, 1000); >; nav.addEventListener('click', toggleNav, false); 

Здесь мы создали новую ОВ, которая вызывается не из обработчика событий, а значит, относится к объекту window. Можно, например, запоминать значение this в другой переменной, чтобы не возникало путаницы:

var nav = document.querySelector('.nav'); // var toggleNav = function () < var that = this; console.log(that); // элемент setTimeout(function () < console.log(that); // элемент >, 1000); >; nav.addEventListener('click', toggleNav, false); 

Меняем ОВ при помощи .call(), .apply() и .bind()

Иногда есть необходимость менять ОВ в зависимости от того, что вам нужно.
В примере:

var links = document.querySelectorAll('nav li'); for (var i = 0; i < links.length; i++) < console.log(this); // [объект Window] >

Значение this не относится к перебираемым элементам, мы ничего не вызываем и не меняем ОВ. Давайте посмотрим, как мы можем менять ОВ (точнее, мы меняем контекст вызова функций).

.call() and .apply()

Методы .call() и .apply() позволяют передавать ОВ в функцию:

var links = document.querySelectorAll('nav li'); for (var i = 0; i < links.length; i++) < (function () < console.log(this); >).call(links[i]); > 

В результате в this передаются значения перебираемых элементов. Метод .call(scope, arg1, arg2, arg3) принимает список аргументов, разделённых запятыми, а метод .apply(scope, [arg1, arg2]) принимает массив аргументов.

Важно помнить, что методы .call() или .apply() вызывают функции, поэтому вместо

myFunction(); // вызывает myFunction 

позвольте .call() вызвать функцию и передать параметр:

.bind()

.bind() не вызывает функцию, а просто привязывает значения переменных перед её вызовом. Как вы знаете, мы не можем передавать параметры в ссылки на функции:

// работает nav.addEventListener('click', toggleNav, false); // приводит к немедленному вызову функции nav.addEventListener('click', toggleNav(arg1, arg2), false); 

Это можно исправить, создав новую вложенную функцию:

nav.addEventListener('click', function () < toggleNav(arg1, arg2); >, false); 

Но тут опять происходит изменение ОВ, создание лишней функции, что негативно отразится на быстродействии. Поэтому мы используем .bind(), в результате мы можем передавать аргументы так, чтобы не происходило вызова функции:

nav.addEventListener('click', toggleNav.bind(scope, arg1, arg2), false); 

Приватные и публичные ОВ

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

Но вызвать эту функцию напрямую нельзя:

(function () < var myFunction = function () < // делаем здесь, что нужно >; >)(); myFunction(); // Uncaught ReferenceError: myFunction is not defined 

Вот вам и приватная ОВ. Если вам нужна публичная ОВ, воспользуемся следующим трюком. Создаём пространство имён Module, которое содержит всё, относящееся к данному модулю:

// определяем модуль var Module = (function () < return < myMethod: function () < console.log('myMethod has been called.'); >>; >)(); // вызов методов модуля Module.myMethod(); 

Директива return возвращает методы, доступные публично, в глобальной ОВ. При этом они относятся к нужному пространству имён. Модуль Module может содержать столько методов, сколько нужно.

// определяем модуль var Module = (function () < return < myMethod: function () < >, someOtherMethod: function () < >>; >)(); // вызов методов модуля Module.myMethod(); Module.someOtherMethod(); 

Не нужно стараться вываливать все методы в глобальную ОВ и загрязнять её. Вот так можно организовать приватную ОВ, не возвращая функции:

var Module = (function () < var privateMethod = function () < >; return < publicMethod: function () < >>; >)(); 

Мы можем вызвать publicMethod, но не можем privateMethod – он относится к приватной ОВ. В эти функции можно засунуть всё что угодно — addClass, removeClass, вызовы Ajax/XHR, Array, Object, и т.п.

Интересный поворот в том, что внутри одной ОВ все функции имеют доступ к любым другим, поэтому из публичных методов мы можем вызывать приватные, которые в глобальной ОВ недоступны:

var Module = (function () < var privateMethod = function () < >; return < publicMethod: function () < // есть доступ к методу `privateMethod`: // privateMethod(); >>; >)(); 

Это повышает интерактивность и безопасность кода. Ради безопасности не стоит вываливать все функции в глобальную ОВ, чтобы функции, которые вызывать не нужно, не вызвали бы ненароком.

Пример возврата объекта с использованием приватных и публичных методов:

var Module = (function () < var myModule = <>; var privateMethod = function () < >; myModule.publicMethod = function () < >; myModule.anotherPublicMethod = function () < >; return myModule; // returns the Object with public methods >)(); // использование Module.publicMethod(); 

Удобно начинать название приватных методов с подчёркивания, чтобы визуально отличать их от публичных:

var Module = (function () < var _privateMethod = function () < >; var publicMethod = function () < >; >)(); 

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

var Module = (function () < var _privateMethod = function () < >; var publicMethod = function () < >; return < publicMethod: publicMethod, anotherPublicMethod: anotherPublicMethod >>)(); 

Источник