[Перевод] Три особенности JavaScript
Иногда JavaScript может вводить разработчика в заблуждение, а иногда — доводить до белого каления из-за своей неполной консистентности. Есть в JavaScript некоторые вещи, которые только запутывают и сбивают с толку. Самые известные из них оператор with, неявные глобальные переменные и странное поведение при операции сравнения.
Пожалуй, вокруг JavaScript разгоралось больше всего споров в истории программирования. Помимо его недостатков (отчасти рассмотренных в новых спецификациях ECMAScript), большинство программистов недовольны следующими моментами:
DOM, который многие ошибочно считают эквивалентом самого языка JavaScript, обладает очень неудачным API. Когда переходишь на JavaScript с языков С и Java, то попадаешь в ловушку синтаксиса, который устроен не так, как в императивных языках. Это очень часто приводит к багам и сильно раздражает. В результате JavaScript обрёл довольно плохую репутацию, которой он, в общем-то, не заслуживает. И чаще всего это связано с тем, что многие разработчики переносят на JavaScript свой опыт работы на Java или С/С++. Здесь разобраны три наиболее трудных случая, демонстрирующих разницу в подходах между Java и JavaScript.Область видимостиБольшинство разработчиков переходят на JavaScript в связи с необходимостью. И почти все повторяют одну ошибку — начинают писать код, не изучив предварительно особенности языка. Очень многие хотя бы раз испытывают затруднения с областями видимости.Синтаксис JavaScript очень похож на используемый в семействе С, с его фигурными скобками, разделяющими конструкции функций, if и for. Поэтому многие разработчики предполагают, что и область видимости на уровне блоков устроена по аналогичным принципам. К сожалению, это не так.
Во-первых, область видимости переменных определяется функциями, а не скобками. То есть if и for не создают новую область видимости, а задекларированная в их конструкциях переменная, на самом деле, «поднимается». То есть создаётся она в начале самой первой функции, в которой она задекларирована, иными словами — в глобальной области видимости.
Во-вторых, наличие оператора with делает область видимости JavaScript динамической, её нельзя определить до начала выполнения программы. Лучше вообще избегать использования with, без него JavaScript превращается в язык, использующий лексические области видимости. То есть достаточно будет прочитать код, чтобы понять для себя все области видимости.
Формально, в JavaScript существует четыре способа включения идентификатора в область видимости:
Согласно стандарту языка: по умолчанию, все области содержат идентификаторы this и arguments. На основе формальных параметров: область видимости любого формального параметра функции ограничена телом функции. С помощью декларирования функций. С помощью декларирования переменных. Но нужно помнить об одном моменте: декларирование (неявное) переменных без использования var приводит к неявному определению глобальной области видимости. То же самое относится и к указателю this, когда функция вызывается без явной привязки.Прежде чем перейти к деталям, следует порекомендовать использовать строгий режим ('use strict';) и помещать все декларирования переменных и функций в начало каждой функции. Избегайте декларирования переменных и функций внутри блоков for и if.
Поднятие Этот термин применяется для упрощённого описания того, как на самом деле осуществляется декларирование. Поднимаемые переменные декларируются в самом начале содержащих их функций, а затем инициализируются как undefined. Присваивание осуществляется непосредственно в той строке, где происходит декларирование.Рассмотрим пример:
function myFunction () { console.log (i); var i = 0; console.log (i); if (true) { var i = 5; console.log (i); } console.log (i); } Как вы думаете, какие значения будут выведены на экран? undefined 0 5 5 Оператор var не декларирует локальную копию переменной i внутри блока if. Вместо этого он перезаписывает уже задекларированную ранее. Обратите внимание, что первый оператор console.log выводит действительное значение переменной i, инициализированной как undefined. А если перейти в строгий режим? В строгом режиме переменные должны декларироваться до того, как они будут использованы, однако движок JavaScript не потребует это сделать. Кстати, имейте в виду, что от вас не потребуют и передекларирования var. Если вам нужно выловить подобные баги, то воспользуйтесь инструментами вроде JSHint или JSLint.Давайте рассмотрим пример, демонстрирующий другой способ декларирования переменных, который может привести к ошибкам:
var notNull = 1; function test () { if (! notNull) { console.log («Null-ish, so far», notNull); for (var notNull = 10; notNull <= 0; notNull++){ //.. } console.log("Now it's not null", notNull); } console.log(notNull); } В этом примере блок if выполняется, потому что локальная копия переменной notNull задекларирована внутри функции test() и поднята. Свою роль здесь играет и операция приведения типа.Функциональные выражения и декларирования функций Поднятие может применяться не только к переменным, но также и к функциональным выражениям, которые фактически являются переменными, и к декларированиям функций. Здесь лишь вскользь упомянуто об этой особенности. Если кратко, то декларирования функций ведут себя в целом как функциональные выражения, за исключением того, что их декларирования размещаются в начале их области видимости.Вот пример декларирования функции:
function foo () { // A function declaration function bar () { return 3; } return bar ();
// This function declaration will be hoisted and overwrite the previous one function bar () { return 8; } } А теперь сравните с примером функционального выражения: function foo () { // A function expression var bar = function () { return 3; }; return bar ();
// The variable bar already exists, and this code will never be reached var bar = function () { return 8; }; } Для более глубокого понимания вопроса стоит обратиться к публикациям, указанным в конце поста.With В этом примере отражена ситуация, когда область видимости можно определить лишь во время выполнения: function foo (y) { var x = 123; with (y) { return x; } } Если y имеет поле x, тогда функция foo () вернёт y.x, в противном случае — 123. Подобная практика может привести к возникновению ошибок на стадии выполнения, так что рекомендуется избегать использования оператора with.Взгляд в будущее: ECMAScript 6 Спецификации ECMAScript 6 позволят внедрить пятый способ определения области видимости на уровне блоков: оператор let. function myFunction () { console.log (i); var i = 0; console.log (i); if (false) { let i = 5; console.log (i); } console.log (i); } В ECMAScript 6 декларирование i внутри if с помощью let позволит создавать новую локальную переменную в блоке if. В качестве нестандартной альтернативы можно декларировать блоки let: var i = 6; let (i = 0, j = 2) { /* Other code here */ } // prints 6 console.log (i); В этом примере переменные i и j будут существовать только внутри блока. На момент написания поста только в Chrome поддерживается использование let.В других языках Ниже представлена сравнительная таблица особенностей реализации областей видимости в разных языках: Свойство Java Python JavaScript Примечание Область видимости Лексическая (блоки) Лексическая (функции, классы или модули) Да Работает совсем не так, как в Java или С. Блочная область видимости Да Нет В связке с let (ES6) Работает совсем не так, как в Java. Поднимание Нет Нет Да Для декларирования переменных, функций и функциональных выражений. Функции Ещё одним камнем преткновения в JavaScript зачастую становятся функции. Причина в том, что в императивных языках вроде Java используется совсем иная концепция. JavaScript относится к функциональным языкам программирования. Правда, он не чисто функциональный, всё-таки в нём явно прослеживается императивный стиль и поощряется мутабельность. Но как бы то ни было, JavaScript может быть использован исключительно как функциональный язык, без какого-либо внешнего воздействия на вызовы функций.В JavaScript с функциями можно обращаться как с любыми другими типами данных, например, String или Number. Их можно хранить в переменных и массивах, передавать в качестве аргументов другим функциям и возвращать другими функциями. У них могут быть свойства, их можно динамически изменять, и всё это благодаря объектам.
Для многих новичков в JavaScript удивителен тот факт, что функции здесь являются объектами. Конструктор Function создаёт объект Function:
var func = new Function (['a', 'b', 'c'], ''); Это почти аналогично: function func (a, b, c) { } Почти — потому что использование конструктора менее эффективно. Он генерирует анонимную функцию и не создаёт замыкания для её контекста. Объекты Function всегда создаются в глобальной области видимости.Function, как разновидность функций, основана на базе Object. Это хорошо видно, если разобрать любую декларируемую нами функцию:
function test () {} // prints «object» console.log (typeof test.prototype); // prints function Function () { [native code] } console.log (test.constructor); Это значит, что у функции есть свойства. Некоторые из них назначаются при создании. Например name или length, возвращающие, соответственно, наименование и количество аргументов в определении функции. function func (a, b, c) { } // prints «func» console.log (func.name); // prints 3 console.log (func.length); Любой функции можно задать и другие свойства, по своему усмотрению: function test () { console.log (test.custom); } test.custom = 123; // prints 123 test (); В других языках Сравнительная таблица реализаций функций в разных языках: Свойство Java Python JavaScript Примечание Функции как встроенные типы Лямбды, Java 8 Да Да Шаблон коллбэков/команд Объекты (или лямбды для Java 8) Да Да Функции (коллбэки) Динамическое создание Нет Нет eval (объект Function) eval вызывает вопросы с точки зрения безопасности, объекты Function могут работать непредсказуемо Свойства Нет Нет Могут иметь свойства Доступ к свойствам функций можно ограничить Замыкания JavaScript был первым из основных языков программирования, в котором появились замыкания. Как вы, вероятно, знаете, в Java и Python долгое время были упрощённые версии замыканий, когда можно было только считывать некоторые значения из объемлющих областей видимости. Скажем, в Java анонимный вложенный класс обеспечивает функциональность, аналогичную замыканиям (с некоторыми ограничениями). Например, в их областях видимости могут использоваться только финальные локальные переменные. Точнее, могут быть считаны их значения.В JavaScript имеется полный доступ к внешним переменным и функциям внешней области видимости. Их можно считывать, записывать и, при необходимости, даже скрывать с помощью локальных определений. Примеры этого были неоднократно представлены в первой главе.
Ещё интереснее то, что созданная в замыкании функция «помнит» окружение, в котором она была создана. Комбинируя замыкания и вложенность функций, можно сделать так, что внешние функции будут возвращать внутренние без их исполнения. Более того, локальные переменные внешних функций могут сохраняться в замыкании внутренней функции ещё долгое время после исполнения той, где они декларировались последний раз. Это довольно мощный инструмент, но у него есть один недостаток: распространённая проблема утечки памяти в JavaScript-приложениях.
Для лучшего понимания всего вышесказанного, давайте разберём несколько примеров.
function makeCounter () { var i = 0;
return function displayCounter () { console.log (++i); }; } var counter = makeCounter (); // prints 1 counter (); // prints 2 counter (); Функция makeCounter () создаёт и возвращает другую функцию, которая сохраняет связь со своим родительским окружением. Хотя исполнение makeCounter () закончилось с присвоением переменной counter, локальная переменная i сохраняется в замыкании displayCounter, внутри тела которого можно получить к ней доступ.Если снова запустить makeCounter (), то она создаст новое замыкание с другим начальным значением i:
var counterBis = makeCounter (); // prints 1 counterBis (); // prints 3 counter (); // prints 2 counterBis (); Можно сделать и так, что makeCounter () примет аргумент: function makeCounter (i) { return function displayCounter () { console.log (++i); }; } var counter = makeCounter (10); // prints 11 counter (); // prints 12 counter (); Аргументы внешних функций также хранятся в замыкании, так что нам не нужно декларировать локальную переменную. При каждом вызове makeCounter () будет запоминаться установленное нами начальное значение, от которого и будет вестись отсчёт.Замыкания крайне важны для многих фундаментальных вещей в JavaScript: пространства имён, модулей, закрытых переменных, мемоизации и т.д. Например, вот так можно смоделировать закрытую переменную для объекта:
function Person (name) { return { setName: function (newName) { if (typeof newName === 'string' && newName.length > 0) { name = newName; } else { throw new TypeError («Not a valid name»); } }, getName: function () { return name; } }; }
var p = Person («Marcello»);
// prints «Marcello» a.getName ();
// Uncaught TypeError: Not a valid name a.setName ();
// Uncaught TypeError: Not a valid name a.setName (2); a.setName (»2»);
// prints »2» a.getName (); Таким образом можно создавать обёртку для имени свойства с нашими собственными сеттером и геттером. В ES 5 это стало делать гораздо проще, поскольку можно создавать объекты с сеттерами/геттерами для их свойств и тонко настраивать доступ к этим свойствам.В других языках Сравнительная таблица реализаций замыканий в разных языках: Свойство Java Python JavaScript Примечание Замыкание С ограниченными возможностями, только чтение, в анонимных вложенных классах С ограниченными возможностями, только чтение, во вложенных определениях Да Утечки памяти Шаблон мемоизации Необходимо использовать совместно используемые объекты Возможно с использованием списков или словарей Да Лучше использовать отложенные вычисления Шаблон пространства имён/модуля Не нужно Не нужно Да Шаблон приватных атрибутов Не нужно Невозможно Да Может ввести в заблуждение Заключение Итак, в этой статье описаны три особенности JavaScript, которые чаще всего сбивают с толку разработчиков, ранее работавших на других языках программирования, особенно на Java и С. Если вы хотите глубже изучить затронутые темы, можно почитать эти ресурсы: • Scoping in JavaScript• Function Declarations vs Function Expressions• Let statement and let blocks
