Прототипное наследование
В программировании мы часто хотим взять что-то и расширить.
Прототипное наследование — это возможность языка, которая помогает в этом.
[[Prototype]]
Свойство [[Prototype]] является внутренним и скрытым, но есть много способов задать его.
Здесь мы можем сказать, что » animal является прототипом rabbit » или » rabbit прототипно наследует от animal «.
Метод автоматически берётся из прототипа:
Цепочка прототипов может быть длиннее:
Есть только два ограничения:
Операция записи не использует прототип
Прототип используется только для чтения свойств.
Операции записи/удаления работают напрямую с объектом.
В приведённом ниже примере мы присваиваем rabbit собственный метод walk :
Теперь вызов rabbit.walk() находит метод непосредственно в объекте и выполняет его, не используя прототип:
Свойства-аксессоры – исключение, так как запись в него обрабатывается функцией-сеттером. То есть, это, фактически, вызов функции.
По этой причине admin.fullName работает корректно в приведённом ниже коде:
Значение «this»
Неважно, где находится метод: в объекте или его прототипе. При вызове метода this — всегда объект перед точкой.
Это на самом деле очень важная деталь, потому что у нас может быть большой объект со множеством методов, от которого можно наследовать. Затем наследующие объекты могут вызывать его методы, но они будут изменять своё состояние, а не состояние объекта-родителя.
Например, здесь animal представляет собой «хранилище методов», и rabbit использует его.
3 способа проверить в JavaScript, есть ли у объекта свойство
Дата публикации: 2020-07-06
От автора: из-за динамической природы JavaScript вам может потребоваться проверить, существует ли в объекте конкретное свойство. В этом посте вы узнаете о трех распространенных способах проверки наличия свойства в объекте.
1. Метод hasOwnProperty()
У объекта JavaScript есть специальный метод object.hasOwnProperty(propName), который возвращает логическое значение, указывающее, имеет object ли свойство propName. В следующем примере hasOwnProperty() определяется наличие свойств:
Свойство name существует в объекте hero: таким образом, hero.hasOwnProperty(‘name’) возвращается true.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
С другой стороны, свойство realName не существует в объекте hero. Как и ожидалось, hero.hasOwnProperty(‘realName’) возвращается false — обозначает отсутствующее свойство.
Имя метода hasOwnProperty() предполагает, что он ищет свойства в собственных свойствах объекта. Проще говоря, собственными свойствами являются те, которые определены непосредственно для объекта.
Даже если у каждого объекта JavaScript есть унаследованное свойство toString (которое является методом, унаследованным от прототипа объекта), hasOwnProperty() оно не определяется как свойство:
2. Оператор in
Оператор in в propName in object также определяет, существует ли свойство propName в object. Давайте используем оператор in, чтобы определить существует ли свойство:
‘name’ in hero оценивается, как ожидается, true, потому что hero содержит свойство name. Однако hero не содержит свойства с именем ‘realName’. В результате ‘realName’ in hero оценивается, как false.
У оператора in короткий синтаксис, и я в большинстве случаев предпочитаю его методу hasOwnProperty(). Вот основное различие между методом hasOwnProperty() и оператором in: последний проверяет не только собственные свойства, но и список унаследованных свойств.
Вот почему, в отличие от hasOwnProperty(), оператор in обнаруживает, что унаследованное свойство toString существует в объекте hero:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
3. Сравнение с undefined
Если вы обращаетесь к несуществующему свойству объекта, результат будет undefined. Давайте рассмотрим пример:
hero.realName оценивается undefined, потому что свойство realName отсутствует. Теперь вы можете понять идею: давайте сравним с undefined, чтобы определить наличие свойства.
Я сравнивал с undefined, чтобы определить существование свойства в течение довольно долгого времени. Это простой, но грязный подход.
Обратите внимание, что этот подход может генерировать ложноотрицательный результат. Если свойство существует, но имеет значение undefined (этот случай, однако, встречается редко), сравнение с undefined оценивается неверно false:
4. Заключение
Есть 3 основных способа проверить, существует ли свойство. Первый способ — вызвать object.hasOwnProperty(propName). Метод возвращает true, если propName существует в object, и false в противном случае. Обратите внимание, что hasOwnProperty() выполняет поиск только в пределах собственных свойств объекта.
Второй подход использует оператор propName in object. Оператор оценивается true для существующего свойства, и false в противном случае. Оператор in ищет наличие свойств как в собственных, так и в унаследованных свойствах объекта.
Автор: Dmitri Pavlutin
Редакция: Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
JavaScript Garden. Объекты
Объекты и их свойства
Неверно считать, что числовые литералы нельзя использовать в качестве объектов — это распространённое заблуждение. Его причиной является упущение в парсере JavaScript, благодаря которому применение точечной нотации к числу воспринимается им как литерал числа с плавающей точкой.
Есть несколько способов обойти этот недостаток и любой из них можно использовать для того, чтобы работать с числами, как с объектами:
Объекты как тип данных
Объекты в JavaScript могут использоваться как хеш-таблицы: подавляющей частью состоят из именованных свойств (ключей), привязанных к значениям.
Используя объектный литерал — нотацию <> — можно создать простой объект. Новый объект наследуется от Object.prototype и не имеет собственных свойств.
Доступ к свойствам
Получить доступ к свойствам объекта можно двумя способами: используя либо точечную нотацию, либо запись квадратными скобками.
Обе нотации идентичны по принципу работы — одна лишь разница в том, что использование квадратных скобок позволяет устанавливать свойства динамически и использовать такие имена свойств, какие в других случаях могли бы привести к синтаксической ошибке.
Удаление свойств
Приведённый код выведет две строки: bar undefined и foo null — на самом деле удалено было только свойство baz и посему только оно будет отсутствовать в выводе.
Запись ключей
Свойства объектов могут записываться как явно символами, так и в виде закавыченных строк. В связи с другим упущением в парсере JavaScript, этот код выбросит SyntaxError во всех версиях ранее ECMAScript 5.
Источником ошибки является факт, что delete — это ключевое слово и поэтому его необходимо записывать как строчный литерал: ради уверенности в том, что оно будет корректно опознано более старыми движками JavaScript.
От перев.: И еще один пример в пользу строковой нотации, это относится к JSON. JSON (англ. JavaScript Object Notation) — текстовый формат обмена данными, основанный на JavaScript и обычно используемый именно с этим языком.
Великий Прототип
В JavaScript отсутствует классическая модель наследования — вместо неё используется прототипная модель.
Хотя её часто расценивают как один из недостатков JavaScript, на самом деле прототипная модель наследования намного мощнее классической. К примеру, поверх неё можно предельно легко реализовать классическое наследование, а попытки совершить обратное вынудят вас попотеть.
Из-за того, что JavaScript — практически единственный широко используемый язык с прототипным наследованием, придётся потратить некоторое время на осознание различий между этими двумя моделями.
Первое важное отличие заключается в том, что наследование в JavaScript выполняется с использованием так называемых цепочек прототипов.
Поиск свойств
При обращении к какому-либо свойству объекта, JavaScript проходит вверх по цепочке прототипов этого объекта, пока не найдет свойство c запрашиваемым именем.
Свойство prototype
То, что свойство prototype используется языком для построения цепочек прототипов, даёт нам возможность присвоить любое значение этому свойству. Однако обычные примитивы, если назначать их в качестве прототипа, будут просто-напросто игнорироваться.
При этом присвоение объектов, как в примере выше, позволит вам динамически создавать цепочки прототипов.
Производительность
Поиск свойств, располагающихся относительно высоко по цепочке прототипов, может негативно сказаться на производительности, особенно в критических местах кода. Если же мы попытаемся найти несуществующее свойство, то поиск будет осуществлён вообще по всей цепочке, со всеми вытекающими последствиями.
Вдобавок, при циклическом переборе свойств объекта, будет обработано каждое свойство, существующее в цепочке прототипов.
Расширение встроенных прототипов
Часто встречается неверное применение прототипов — расширение прототипа Object.prototype или прототипов одного из встроенных объектов JavaScript.
Подобная практика нарушает принцип инкапсуляции и имеет соответствующее название — monkey patching. К сожалению, в основу многих широко распространенных фреймворков, например Prototype, положен принцип изменения базовых прототипов. Вам же стоит запомнить — от хорошей жизни прототипы встроенных объектов не меняют.
Заключение
Перед тем, как вы приступите к разработке сложных приложений на JavaScript, вы должны полностью осознать как работают прототипы, и как организовывать наследование на их основе. Также, помните о зависимости между длиной цепочек прототипов и производительностью — разрывайте их при необходимости. Кроме того — никогда не расширяйте прототипы встроенных объектов (ну, если только для совместимости с новыми возможностями Javascript).
Функция hasOwnProperty
hasOwnProperty — единственная функция в JavaScript, которая позволяет получить свойства объекта без обращения к цепочке его прототипов.
Только используя hasOwnProperty можно гарантировать правильный результат при переборе свойств объекта. И нет иного способа для определения свойств, которые определены в самом объекте, а не где-то в цепочке его прототипов.
hasOwnProperty как свойство
Заключение
Цикл for in
Примечание: Цикл for in всегда обходит всю цепочку прототипов полностью: таким образом, чем больше прототипов (слоёв наследования) в цепочке, тем медленнее работает цикл.
Использование hasOwnProperty в качестве фильтра
Рекомендации
Методы прототипов, объекты без свойства __proto__
В первой главе этого раздела мы упоминали, что существуют современные методы работы с прототипами.
Свойство __proto__ считается устаревшим, и по стандарту оно должно поддерживаться только браузерами.
Современные же методы это:
У Object.create есть необязательный второй аргумент: дескрипторы свойств. Мы можем добавить дополнительное свойство новому объекту таким образом:
Формат задания дескрипторов описан в главе Флаги и дескрипторы свойств.
Мы также можем использовать Object.create для «продвинутого» клонирования объекта, более мощного, чем копирование свойств в цикле for..in :
Краткая история
Если пересчитать все способы управления прототипом, то их будет много! И многие из них делают одно и то же!
В силу исторических причин.
В итоге сейчас у нас есть все эти способы для работы с прототипом.
И JavaScript движки хорошо оптимизированы для этого. Изменение прототипа «на лету» с помощью Object.setPrototypeOf или obj.__proto__= – очень медленная операция, которая ломает внутренние оптимизации для операций доступа к свойствам объекта. Так что лучше избегайте этого кроме тех случаев, когда вы знаете, что делаете, или же когда скорость JavaScript для вас не имеет никакого значения.
«Простейший» объект
Как мы знаем, объекты можно использовать как ассоциативные массивы для хранения пар ключ/значение.
Посмотрите на пример:
Но мы не намеревались реализовывать такое поведение, не так ли? Мы хотим хранить пары ключ/значение, и ключ с именем «__proto__» не был сохранён надлежащим образом. Так что это ошибка!
Конкретно в этом примере последствия не так ужасны, но если мы присваиваем объектные значения, то прототип и в самом деле может быть изменён. В результате дальнейшее выполнение пойдёт совершенно непредсказуемым образом.
Что хуже всего – разработчики не задумываются о такой возможности совсем. Это делает такие ошибки сложным для отлавливания или даже превращает их в уязвимости, особенно когда JavaScript используется на сервере.
Как же избежать проблемы?
Но и Object может также хорошо подойти, потому что создатели языка уже давно продумали решение проблемы.
Свойство __proto__ – не обычное, а аксессор, заданный в Object.prototype :
Теперь, если мы хотим использовать объект как ассоциативный массив, мы можем сделать это с помощью небольшого трюка:
Вступление
Авторы
Это руководство является результатом работы двух заядлых пользователей Stack Overflow: Иво Ветцель /Ivo Wetzel/ (автора текста) и Чжан И Цзян /Zhang Yi Jiang/ (дизайнера).
Участники
Переводчики
Лицензия
JavaScript Гарден распространяется под лицензией MIT и располагается на GitHub. Если вы найдёте ошибку или опечатку, пожалуйста сообщите нам о ней или запросите права на загрузку в репозиторий. Кроме того, вы можете найти нас в комнате JavaScript среди чатов Stack Overflow.
Объекты
Объекты и их свойства
Неверно считать, что числовые литералы нельзя использовать в качестве объектов — это распространённое заблуждение. Его причиной является упущение в парсере JavaScript, благодаря которому применение точечной нотации к числу воспринимается им как литерал числа с плавающей точкой.
Есть несколько способов обойти этот недостаток и любой из них можно использовать для того, чтобы работать с числами, как с объектами:
Объекты как тип данных
Объекты в JavaScript могут использоваться как хеш-таблицы: подавляющей частью состоят из именованных свойств (ключей), привязанных к значениям.
Используя объектный литерал — нотацию <> — можно создать простой объект. Новый объект наследуется от Object.prototype и не имеет собственных свойств.
Доступ к свойствам
Получить доступ к свойствам объекта можно двумя способами: используя либо точечную нотацию, либо запись квадратными скобками.
Обе нотации идентичны по принципу работы — одна лишь разница в том, что использование квадратных скобок позволяет устанавливать свойства динамически и использовать такие имена свойств, какие в других случаях могли бы привести к синтаксической ошибке.
Удаление свойств
Замечание от перев.: Если ссылок на значение больше нет, то сборщиком мусора удаляется и само значение, но ключ объекта при этом всё так же имеет новое значение.
Приведённый код выведет две строки: bar undefined и foo null — на самом деле удалено было только свойство baz и посему только оно будет отсутствовать в выводе.
Запись ключей
Свойства объектов могут записываться как явно символами, так и в виде закавыченных строк. В связи с другим упущением в парсере JavaScript, этот код выбросит SyntaxError во всех версиях ранее ECMAScript 5.
Источником ошибки является факт, что delete — это ключевое слово и поэтому его необходимо записывать как строчный литерал: ради уверенности в том, что оно будет корректно опознано более старыми движками JavaScript.
От перев.: И еще один пример в пользу строковой нотации, это относится к JSON:
Великий Прототип
В JavaScript отсутствует классическая модель наследования — вместо неё используется прототипная модель.
Хотя её часто расценивают как один из недостатков JavaScript, на самом деле прототипная модель наследования намного мощнее классической. К примеру, поверх неё можно предельно легко реализовать классическое наследование, а попытки совершить обратное вынудят вас попотеть.
Из-за того, что JavaScript — практически единственный широко используемый язык с прототипным наследованием, придётся потратить некоторое время на осознание различий между этими двумя моделями.
Первое важное отличие заключается в том, что наследование в JavaScript выполняется с использованием так называемых цепочек прототипов.
Замечание: В результате выполнения конструкции Bar.prototype = Foo.prototype оба объекта будут делить друг с другом один и тот же прототип. Так что изменение прототипа одного из объектов повлечёт за собой изменение прототипа другого и наоборот — вряд ли это окажется тем, чего вы ожидали.
Поиск свойств
При обращении к какому-либо свойству объекта, JavaScript проходит вверх по цепочке прототипов этого объекта, пока не найдет свойство c запрашиваемым именем.
Если он достигнет верхушки этой цепочки ( Object.prototype ) и при этом так и не найдёт указанное свойство, вместо него вернётся значение undefined.
Свойство prototype
То, что свойство prototype используется языком для построения цепочек прототипов, даёт нам возможность присвоить любое значение этому свойству. Однако обычные примитивы, если назначать их в качестве прототипа, будут просто-напросто игнорироваться.
При этом присвоение объектов, как в примере выше, позволит вам динамически создавать цепочки прототипов.
Производительность
Поиск свойств, располагающихся относительно высоко по цепочке прототипов, может негативно сказаться на производительности, особенно в критических местах кода. Если же мы попытаемся найти несуществующее свойство, то поиск будет осуществлён вообще по всей цепочке, со всеми вытекающими последствиями.
Вдобавок, при циклическом переборе свойств объекта, будет обработано каждое свойство, существующее в цепочке прототипов.
Расширение встроенных прототипов
Часто встречается неверное применение прототипов — расширение прототипа Object.prototype или прототипов одного из встроенных объектов JavaScript.
Подобная практика нарушает принцип инкапсуляции и имеет соответствующее название — monkey patching. К сожалению, в основу многих широко распространенных фреймворков, например Prototype, положен принцип изменения базовых прототипов. Вам же стоит запомнить — от хорошей жизни прототипы встроенных объектов не меняют.
Заключение
Перед тем, как вы приступите к разработке сложных приложений на JavaScript, вы должны полностью осознать как работают прототипы, и как организовывать наследование на их основе. Также, помните о зависимости между длиной цепочек прототипов и производительностью — разрывайте их при необходимости. Кроме того — никогда не расширяйте прототипы встроенных объектов (ну, если только для совместимости с новыми возможностями Javascript).
Функция hasOwnProperty
hasOwnProperty — единственная функция в JavaScript, которая позволяет получить свойства объекта без обращения к цепочке его прототипов.
Только используя ｀hasOwnProperty｀ можно гарантировать правильный результат при переборе свойств объекта. И нет иного способа для определения свойств, которые определены в самом объекте, а не где-то в цепочке его прототипов.
hasOwnProperty как свойство
Заключение
Цикл for in
Примечание: Цикл for in всегда обходит всю цепочку прототипов полностью: таким образом, чем больше прототипов (слоёв наследования) в цепочке, тем медленнее работает цикл.
Использование hasOwnProperty в качестве фильтра
Рекомендации
Функции
Выражения и объявление функций
Функции в JavaScript тоже являются объектами (шок, сенсация) — следовательно, их можно передавать и присваивать точно так же, как и любой другой объект. Одним из вариантов использования такой возможности является передача анонимной функции как функции обратного вызова в другую функцию — к примеру, для асинхронных вызовов.
Объявление function
В следующем примере описанная функция резервируется перед запуском всего скрипта; за счёт этого она доступна в любом месте кода, вне зависимости от того, где она определена — даже если функция вызывается до её фактического объявления в коде.
function как выражение
Так как в данном примере выражение var — это определение функции, переменная с именем foo будет заранее зарезервирована перед запуском скрипта (таким образом, foo уже будет определена во время его работы).
Но поскольку присвоения исполняются непосредственно во время работы кода, foo по умолчанию будет присвоено значение undefined (до обработки строки с определением функции):
Выражения с именованными фунциями
Существует еще нюанс, касающийся именованных функций создающихся через присваивание:
Как работает this
В JavaScript область ответственности специальной переменной this концептуально отличается от того, за что отвечает this в других языках программирования. Различают ровно пять вариантов того, к чему привязывается this в языке.
1. Глобальная область видимости
Когда мы используем this в глобальной области, она будет просто ссылаться на глобальный объект.
2. Вызов функции
Тут this также ссылается на глобальный объект.
3. Вызов метода
4. Вызов конструктора
5. Переопределение this
Наиболее распространенные ошибки
Хотя большинство из примеров ниже наполнены глубоким смыслом, первый из них можно считать ещё одним упущением в самом языке, поскольку он вообще не имеет практического применения.
Назначение методов
Хотя позднее связывание this на первый взгляд может показаться плохой идеей, но на самом деле именно благодаря этому работает наследование прототипов.
Замыкания и ссылки
Одним из самых мощных инструментов JavaScript’а считаются возможность создавать замыкания — это такой приём, когда наша область видимости всегда имеет доступ к внешней области, в которой она была объявлена. Собственно, единственный механизм работы с областями видимости в JavaScript — это функции: т.о. объявляя функцию, вы автоматически реализуете замыкания.
Эмуляция приватных свойств
Как это работает
Поскольку в JavaScript нельзя присваивать или ссылаться на области видимости, заполучить count извне не представляется возможным. Единственным способом взаимодействовать с ним остается использование двух замыканий.
Замыкания внутри циклов
Часто встречается ошибка, когда замыкания используют внутри циклов, передавая переменную индекса внутрь.
Во избежание ошибок
Для того, чтобы скопировать значение индекса из цикла, лучше всего использовать анонимную функцию как обёртку.
Еще одним способом реализации является возврат функции из анонимной функции-обертки, поведение этого кода будет таким же, как и в коде из предыдущего примера.
Объект arguments
Конвертация в массив
Эта конвертация занимает много времени и использовать её в критических частях кода не рекомендуется.
Передача аргументов
Ниже представлен рекомендуемый способ передачи аргументов из одной функции в другую.
Другой трюк — использовать и call и apply вместе, чтобы быстро создать несвязанную обёртку:
Формальные аргументы и индексы аргументов
Объект arguments создаёт по геттеру и сеттеру и для всех своих свойств и для формальных параметров функции.
В результате, изменение формального параметра также изменит значение соответствующего свойства объекта arguments и наоборот.
Мифы и правда о производительности
Объект arguments создаётся во всех случаях, лишь за двумя исключениями — когда он переопределён внутри функции (по имени) или когда одним из её параметров является переменная с таким именем. Неважно, используется при этом сам объект или нет.
Геттеры и сеттеры создаются всегда; так что их использование практически никак не влияет на производительность.
ES5 Замечание: Эти геттеры и сеттеры не создаются в strict-режиме.
В коде выше, функция foo не может быть развёрнута (а могла бы), потому что для корректной работы ей необходима ссылка и на себя и на вызвавший её объект. Это не только кладёт на лопатки механизм развёртывания, но и нарушает принцип инкапсуляции, поскольку функция становится зависима от конкретного контекста вызова.
Крайне не рекомендуется использовать arguments.callee или какое-либо из его свойств. Никогда.
Конструктор
Этот пример в некоторых случаях всё-таки может сработать: это связано с поведением this в JavaScript — он будет восприниматься парсером как глобальный объект.
Фабрики
В обоих случаях при вызове Bar мы получим один и тот же результат — новый объект со свойством method (спасибо замыканию за это).
Также следует заметить, что вызов new Bar() никак не связан с прототипом возвращаемого объекта. Хоть прототип и назначается всем новосозданным объектам, но Bar никогда не возвращает этот новый объект.
В предыдущем примере нет функциональных отличий между вызовом конструктора с оператором new или без него.
Создание объектов с использованием фабрик
Чтобы создать новый объект, лучше использовать фабрику и создать новый объект внутри этой фабрики.
Хотя данный пример и сработает, если вы забыли ключевое слово new и благодаря ему легче работать с приватными переменными, у него есть несколько недостатков
Заключение
Хотя забытое ключевое слово new и может привести к багам, это точно не причина отказываться от использования прототипов. В конце концов, полезнее решить какой из способов лучше совпадает с требованиями приложения: очень важно выбрать один из стилей создания объектов и после этого не изменять ему.
Области видимости и пространства имён
Хотя JavaScript нормально понимает синтаксис двух фигурных скобок, окружающих блок, он не поддерживает блочную область видимости; всё что остаётся на этот случай в языке — область видимости функций.
Замечание: Нотация <. >будет интерпретирована как блочное выражение, а не как литерал объекта, если она не используется в присваивании, операторе return или в качестве функции. Это замечание, вкупе с автоматической расстановкой точек с запятой, может привести к чрезвычайно хитрым ошибкам.
Также JavaScript не знает ничего о различиях в пространствах имён: всё определяется в глобально доступном пространстве имён.
Проклятие глобальных переменных
Вышеприведённые два скрипта не приводят к одному результату. Скрипт A определяет переменную по имени foo в глобальной области видимости, а скрипт B определяет foo в текущей области видимости.
Повторимся, это вообще не тот же самый эффект. Если вы не используете var — то вы в большой опасности.
Локальные переменные
Высасывание
JavaScript высасывает определения. Это значит, что оба определения с использованием var и определение function будут перенесены наверх заключающей их области видимости.
Этот код трансформируется ещё перед исполнением. JavaScript перемещает операторы var и определение function наверх ближайшей оборачивающей области видимости.
Потерянная область видимости блока не только переместит операторы var вовне циклов и их тел, но и сделает результаты некоторых конструкций с if неинтуитивными.
Но, конечно же, этот код работает: из-за того, что оператор var был перемещён наверх глобальной области видимости
Порядок разрешения имён
Например, когда JavaScript пытается получить доступ к переменной foo в области видимости функции, он будет искать её по имени в такой последовательности:
Пространства имён
Нередкое последствие наличия только одного глобального пространства имён — проблемы с перекрытием имён переменных. В JavaScript эту проблему легко избежать, используя анонимные обёртки.
Безымянные функции являются выражениями; поэтому, чтобы вы имели возможность их выполнить, они сперва должны быть разобраны.
Есть другие способы разбора и последующего вызова выражения с функцией; они, хоть и различаются в синтаксисе, но действуют одинаково.
Заключение
Рекомендуется всегда использовать анонимную обёртку для заключения кода в его собственное пространство имён. Это не только защищает код от совпадений имён, но и позволяет создавать более модульные программы.
Важно добавить, что использование глобальных переменных считается плохой практикой. Любое их использование демонстрирует плохое качество кода и может привести к трудноуловимым ошибкам.
Массивы
Итерации по массивам и свойства
Несмотря на то, что массивы в JavaScript являются объектами, нет достаточных оснований для использования цикла for in для итерации по элементам массива. Фактически, существует несколько весомых причин против использования for in в массивах.
Замечание: Массивы в JavaScript не являются ассоциативными массивами. Для связывания ключей и значений в JavaScript есть только объекты. И при том, что ассоциативные массивы сохраняют заданный порядок, объекты не делают этого.
Итерирование
Несмотря на то, что свойство length определено в самом массиве, поиск этого свойства накладывает дополнительные расходы на каждой итерации цикла. Пусть в этом случае новые движки JavaScript теоретически могут применить оптимизацию, но нет никакого способа узнать, будет оптимизирован код на новом движке или нет.
Фактически, отсутствие кэширования может привести к выполнению цикла в два раза медленнее, чем при кэшировании длины
Свойство length
Хотя геттер свойства length просто возвращает количество элементов содержащихся в массиве, сеттер можно использовать для обрезания массива.
Присвоение свойству length меньшей величины урезает массив, однако присвоение большего значения не даст никакого эффекта.
Заключение
Конструктор Array
Заключение
Использование конструктора Array нужно избегать, насколько это возможно. Литералы определённо предпочтительнее — это краткая запись и она имеет более понятный синтаксис, так что при этом даже улучшается читабельность кода.
Равенство и сравнение
JavaScript имеет 2 различных способа сравнения значений объектов на равенство.
Оператор сравнения
Оператор сравнения состоит из двух символов равенства: ==
Слабая типизированность языка JavaScript подразумевает приведение обеих переменных к одному типу для того, чтобы произвести сравнение.
В таблице выше показаны результаты приведения типов и это главная причина, почему использование == повсеместно считается плохой практикой: оно приводит к трудностям в отслеживании ошибок из-за сложных правил преобразования типов.
Кроме того, приведение типов во время сравнения также влияет на производительность; например, строка должна быть преобразована в число перед сравнением с другим числом.
Оператор строгого равенства
Оператор строгого равенства состоит из трёх символов равенства: ===
В отличие от обычного оператора равенства, оператор строгого равенства не выполняет приведение типов между операндами.
Результаты выше более понятны и позволяют быстрее выявлять ошибки в коде. Это в определённой степени улучшает код, а также дает прирост производительности в случае, если операнды имеют различные типы.
Сравнение объектов
Здесь оба операнда сравниваются на идентичность, а не на равенство; то есть будет проверяться, являются ли операнды одним экземпляром объекта, так же как делает is в Python и сравниваются указатели в С.
Заключение
Крайне рекомендуется использовать только операторы строгого равенства. В случае, когда намечается преобразование типов, нужно сделать явное приведение и не оставлять их на совести языковых хитростей с преобразованиями.
Оператор typeof
Оператор typeof (вместе с instanceof ) — это, вероятно, самая большая недоделка в JavaScript, поскольку, похоже, он поломан более, чем полностью.
Хотя instanceof еще имеет ограниченное применение, typeof на самом деле имеет только один практический случай применения, который при всём при этом не является проверкой типа объекта.
Таблица типов JavaScript
Класс представляет собой значение внутреннего свойства [[Class]] объекта.
Класс объекта
В примере выше Object.prototype.toString вызывается со значением this, являющимся объектом, значение [[Class]] которого нужно получить.
ES5 Замечание: Для удобства в ECMAScript 5 возвращаемое значение Object.prototype.toString для null и undefined было изменено с Object на Null и Undefined соответственно.
Проверка переменных на определённость
Заключение
Для проверки типа объекта настоятельно рекомендуется использовать Object.prototype.toString — это единственный надежный способ. Как показано выше в таблице типов, некоторые возвращаемые typeof значения не определены в спецификации: таким образом, они могут отличаться в различных реализациях.
Кроме случая проверки, была ли определена переменная, typeof следует избегать во что бы то ни стало.
Оператор instanceof
Оператор instanceof сравнивает конструкторы двух операндов. Это полезно только когда сравниваются пользовательские объекты. Использование на встроенных типах почти так же бесполезно, как и оператор typeof.
Сравнение пользовательских объектов
Использование instanceof со встроенными типами
Здесь надо отметить одну важную вещь: instanceof не работает на объектах, которые происходят из разных контекстов JavaScript (например, из различных документов в web-браузере), так как их конструкторы и правда не будут конструкторами тех самых объектов.
Заключение
Приведение типов
JavaScript — слабо типизированный язык, поэтому преобразование типов будет применяться везде, где возможно.
ES5 Замечание: Числовые литералы, которые начинаются с 0, интерпретируются как восьмеричные (Base 8). В ECMAScript 5 strict mode удалена поддержка восьмеричной системы.
Для того, чтобы избежать этого, настоятельно рекомендуется использовать оператор строгого равенства. Впрочем, хотя это и позволяет избежать многих распространенных ошибок, существует ещё много дополнительных вопросов, которые возникают из-за слабости типизации JavaScript.
Конструкторы встроенных типов
Конструкторы встроенных типов, например, Number и String ведут себя различным образом, в зависимости от того, вызываются они с ключевым словом new или без.
Кроме того, присутствие литералов или переменных, которые не являются объектами, приведет к еще большему насилию над типами.
Лучший вариант — это явное приведение к одному из трех возможных типов.
Приведение к строке
Путём добавления в начале пустой строки, значение легко приводится к строке.
Приведение к числовому типу
Используя унарный оператор плюс, можно преобразовать значение в число.
Приведение к булеву типу
Используя оператор not ( ! ) дважды, значение может быть приведено к логическому (булеву) типу.
Нативности
Почему нельзя использовать eval
Функция eval выполняет строку кода JavaScript в локальной области видимости.
eval под прикрытием
Обе функции работы с интервалами времени setTimeout и setInterval могут принимать строку в качестве первого аргумента. Эта строка всегда будет выполняться в глобальной области видимости, поскольку eval в этом случае вызывается не напрямую.
Проблемы с безопасностью
Кроме всего прочего, функция eval — это проблема в безопасности, поскольку исполняется любой переданный в неё код; никогда не следует использовать её со строками из неизвестных или недоверенных источников.
Заключение
undefined и null
Тип undefined
Несколько случаев, когда возвращается undefined :
Обработка изменений значения undefined
Другой способ достичь того же эффекта — использовать определение внутри обёртки.
Использование null
Хотя undefined в контексте языка JavaScript чаще используется в качестве традиционного null, настоящий null (и тип и литерал) является в большей или меньшей степени просто другим типом данных.
Автоматическая вставка точек с запятой
Хоть JavaScript и имеет синтаксис, подобный языкам семейства C, он при этом не принуждает вас ставить точки с запятой в исходном коде — вы всегда можете их опустить.
При этом JavaScript — не язык без точек с запятой, они на самом деле нужны ему, чтобы он мог разобраться в вашем коде. Поэтому парсер JavaScript автоматически вставляет их в те места, где сталкивается с ошибкой парсинга из-за их отсутствия.
Происходит вставка и парсер пытается снова.
Автоматическая вставка точек с запятой считается одним из наибольших упущений в проекте языка, поскольку она может изменить поведение кода.
Как это работает
Приведённый код не содержит точек с запятой, так что места для их вставки остаются на совести парсера:
Ниже представлен результат игры парсера в «угадалки».
Парсер радикально подменил поведение изначального кода, а в определённых случаях он сделал абсолютно неправильные выводы.
«Висящие» скобки
Если парсер встречает «висящую» скобку, то он не вставляет точку с запятой.
Такой код трансформируется в строку
Заключение
Другое
setTimeout и setInterval
Замечание: Таймауты не являются частью стандарта ECMAScript, они были разработаны как раздел спецификации DOM.
Функция setTimeout возвращает идентификатор таймаута и планирует вызвать foo через, примерно, тысячу миллисекунд. Функция foo при этом будет вызвана ровно один раз.
В зависимости от разрешения таймера в используемом для запуска кода движке JavaScript, а также с учётом того, что JavaScript является однопоточным языком и посторонний код может заблокировать выполнение потока, нет никакой гарантии, что переданный код будет выполнен ровно через указанное в вызове setTimeout время.
Переданная первым параметром функция будет вызвана как глобальный объект — это значит, что оператор this в вызываемой функции будет ссылаться на этот самый объект.
Поочерёдные вызовы с использованием setInterval
setTimeout вызывает функцию единожды; setInterval — как и предполагает название — вызывает функцию каждые X миллисекунд. И его использование не рекомендуется.
В то время, когда исполняющийся код будет блокироваться во время вызова с таймаутом, setInterval будет продолжать планировать последующие вызовы переданной функции. Это может (особенно в случае небольших интервалов) повлечь за собой выстраивание вызовов функций в очередь.
В приведённом коде foo выполнится один раз и заблокирует этим главный поток на одну секунду.
Разбираемся с потенциальной блокировкой кода
Самый простой и контролируемый способ — использовать setTimeout внутри самой функции.
Очистка таймаутов вручную
Очистка всех таймаутов
Из-за того, что встроенного метода для удаления всех таймаутов и/или интервалов не существует, для достижения этой цели приходится использовать брутфорс.
Вполне могут остаться таймауты, которые не будут захвачены этим произвольным числом; так что всё же рекомендуется следить за идентификаторами всех создающихся таймаутов, за счёт чего их можно будет удалять индивидуально.
Скрытое использование eval
Поскольку eval в этом случае не вызывается напрямую, переданная в setTimeout строка будет выполнена в глобальной области видимости; так что локальная переменная foo из области видимости bar не будет выполнена.
По этим же причинам рекомендуется не использовать строку для передачи аргументов в функцию, которая должна быть вызвана из одной из двух функций, работающих с таймаутами.
Замечание: При том, что синтаксис setTimeout(foo, 1000, 1, 2, 3) разрешено использовать, это крайне не рекомендуется, поскольку может привести к сложно распознаваемым ошибкам при работе с методами.
Заключение
Кроме того, избегайте использования setInterval в случаях, когда его планировщик может блокировать выполнение JavaScript.
Пояснения
От переводчиков
Авторы этой документации требуют от читателя не совершать каких-либо ошибок и постоянно следить за качеством пишущегося кода. Мы, как переводчики и опытные программисты на JavaScript, рекомендуем прислушиваться к этим советам, но при этом не делать из этого крайность. Опыт — сын ошибок трудных, и иногда в борьбе с ошибками зарождается намного более детальное понимание предмета. Да, нужно избегать ошибок, но допускать их неосознанно — вполне нормально.
Функцию setInterval тоже можно использовать, если вы стопроцентно уверены, что код внутри неё будет исполняться как минимум в три раза быстрее переданного ей интервала.
С другой стороны, использование var и грамотная расстановка точек с запятой — обязательные вещи, халатное отношение к которым никак не может быть оправдано — в осознанном пропуске var (если только вы не переопределяете глобальный объект браузера. хотя зачем?) или точки с запятой нет никакого смысла.
Относитесь с мудростью к тому, что вы пишете — важно знать, как работает именно ваш код и как это соответствует приведённым в статье тезисам — и уже из этого вы сможете делать вывод, подходит ли вам тот или иной подход или нет. Важно знать, как работает прототипное наследование, но это не так необходимо, если вы используете функциональный подход или пользуетесь какой-либо сторонней библиотекой. Важно помнить о том, что у вас недостаёт какого-либо конкретного знания и что пробел следует заполнить, но если вы не используете в работе эту часть, вы всё равно можете писать хороший код — ну, если у вас есть талант.
Гонка за оптимизацией — это драматично и правильно, но лучше написать работающий и понятный вам код, а потом уже его оптимизировать и искать узкие места при необходимости. Оптимизацию необходимо делать, если вы видите явные неудобства для пользователя в тех или иных браузерах, или у вас один из тех супер-крупных проектов, которым никогда не помешает оптимизация, или вы работаете с какой-либо сверхтребовательной технологией типа WebGL. Данная документация очень поможет вам в определении этих узких мест.
