Что такое prototype javascript prototype
Прототип объекта
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/prototype-inheritance.
Объекты в JavaScript можно организовать в цепочки так, чтобы свойство, не найденное в одном объекте, автоматически искалось бы в другом.
Прототип proto
Свойство __proto__ доступно во всех браузерах, кроме IE10-, а в более старых IE оно, конечно же, тоже есть, но напрямую к нему не обратиться, требуются чуть более сложные способы, которые мы рассмотрим позднее.
Пример кода (кроме IE10-):
Иллюстрация происходящего при чтении rabbit.eats (поиск идёт снизу вверх):
Обратим внимание – прототип используется исключительно при чтении. Запись значения, например, rabbit.eats = value или удаление delete rabbit.eats – работает напрямую с объектом.
Другими словами, прототип – это «резервное хранилище свойств и методов» объекта, автоматически используемое при поиске.
Метод hasOwnProperty
Обычный цикл for..in не делает различия между свойствами объекта и его прототипа.
Он перебирает всё, например:
Иногда хочется посмотреть, что находится именно в самом объекте, а не в прототипе.
Для того, чтобы перебрать свойства самого объекта, достаточно профильтровать key через hasOwnProperty :
Object.create(null)
Зачастую объекты используют для хранения произвольных значений по ключу, как коллекцию:
Это может быть неприятным сюрпризом и приводить к ошибкам, если названия свойств приходят от посетителя и могут быть произвольными.
Чтобы этого избежать, мы можем исключать свойства, не принадлежащие самому объекту:
Однако, есть путь и проще:
Объект, создаваемый при помощи Object.create(null) не имеет прототипа, а значит в нём нет лишних свойств. Для коллекции – как раз то, что надо.
Методы для работы с proto
Чтение: Object.getPrototypeOf(obj) Возвращает obj.__proto__ (кроме IE8-) Запись: Object.setPrototypeOf(obj, proto) Устанавливает obj.__proto__ = proto (кроме IE10-).
Кроме того, есть ещё один вспомогательный метод:
Итого
В современных браузерах есть методы для работы с прототипом:
Также мы рассмотрим, как свойство __proto__ используется внутри самого языка JavaScript и как организовать классы с его помощью.
Встроенные прототипы
Свойство «prototype» широко используется внутри самого языка JavaScript. Все встроенные функции-конструкторы используют его.
Сначала мы рассмотрим детали, а затем используем «prototype» для добавления встроенным объектам новой функциональности.
Object.prototype
Давайте выведем пустой объект:
Вот что происходит:
Когда вызывается new Object() (или создаётся объект с помощью литерала <. >), свойство [[Prototype]] этого объекта устанавливается на Object.prototype по правилам, которые мы обсуждали в предыдущей главе:
Мы можем проверить это так:
Обратите внимание, что по цепочке прототипов выше Object.prototype больше нет свойства [[Prototype]] :
Другие встроенные прототипы
Вот более полная картина (для трёх встроенных объектов):
Давайте проверим прототипы:
В браузерных инструментах, таких как консоль разработчика, можно посмотреть цепочку наследования (возможно, потребуется использовать console.dir для встроенных объектов):
Примитивы
Самое сложное происходит со строками, числами и булевыми значениями.
Специальные значения null и undefined стоят особняком. У них нет объектов-обёрток, так что методы и свойства им недоступны. Также у них нет соответствующих прототипов.
Изменение встроенных прототипов
В течение процесса разработки у нас могут возникнуть идеи о новых встроенных методах, которые нам хотелось бы иметь, и искушение добавить их во встроенные прототипы. Это плохая идея.
Так что, в общем, изменение встроенных прототипов считается плохой идеей.
В современном программировании есть только один случай, в котором одобряется изменение встроенных прототипов. Это создание полифилов.
Полифил – это термин, который означает эмуляцию метода, который существует в спецификации JavaScript, но ещё не поддерживается текущим движком JavaScript.
Тогда мы можем реализовать его сами и добавить во встроенный прототип.
Заимствование у прототипов
В главе Декораторы и переадресация вызова, call/apply мы говорили о заимствовании методов.
Это когда мы берём метод из одного объекта и копируем его в другой.
Некоторые методы встроенных прототипов часто одалживают.
Например, если мы создаём объект, похожий на массив (псевдомассив), мы можем скопировать некоторые методы из Array в этот объект.
Но это будет невозможно, если obj уже наследует от другого объекта. Помните, мы можем наследовать только от одного объекта одновременно.
Заимствование методов – гибкий способ, позволяющий смешивать функциональность разных объектов по необходимости.
Итого
Задачи
Добавить функциям метод «f.defer(ms)»
Прототипы в JavaScript
Когда вы определяете функцию в JavaScript она получает несколько предопределённых свойств. Одним из таких свойств является мнимый прототип. В данном уроке мы рассмотрим, что такое прототип, зачем и когда его нужно использовать.
Что такое прототип?
Секретная ссылка
Прежде чем продолжить, нужно обсудить «секретную» ссылку, которая заставляет прототип работать так, как он работает.
В действительности все не так просто. Здесь мы приводим только иллюстративную часть для демонстрации работы цепочки прототипа.
Таким образом мы можем создавать столько реализаций объекта, сколько нужно.
Зачем использовать прототип?
Как использовать прототип?
Вызов метода draw осуществляется очень просто:
И теперь все предыдущие и будущие реализации GameObject будут рисовать круги.
Изменение предопределенного прототипа.
Да, такое возможно. Может быть вы знакомы с библиотеками JavaScript, например, Prototype, которые используют данную возможность.
Теперь можно использовать данный метод для любой строки:
Хотя, обычно следует избегать изменения предопределенных прототипов.
Заключение
Прототипы помогают создавать более эффективные приложения JavaScript.
5 последних уроков рубрики «Разное»
Как выбрать хороший хостинг для своего сайта?
Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.
Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.
Разработка веб-сайтов с помощью онлайн платформы Wrike
20 ресурсов для прототипирования
Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.
Топ 10 бесплатных хостингов
Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.
Прототипное наследование
В программировании мы часто хотим взять что-то и расширить.
Прототипное наследование — это возможность языка, которая помогает в этом.
[[Prototype]]
Свойство [[Prototype]] является внутренним и скрытым, но есть много способов задать его.
Здесь мы можем сказать, что » animal является прототипом rabbit » или » rabbit прототипно наследует от animal «.
Метод автоматически берётся из прототипа:
Цепочка прототипов может быть длиннее:
Есть только два ограничения:
Операция записи не использует прототип
Прототип используется только для чтения свойств.
Операции записи/удаления работают напрямую с объектом.
В приведённом ниже примере мы присваиваем rabbit собственный метод walk :
Теперь вызов rabbit.walk() находит метод непосредственно в объекте и выполняет его, не используя прототип:
Свойства-аксессоры – исключение, так как запись в него обрабатывается функцией-сеттером. То есть, это, фактически, вызов функции.
По этой причине admin.fullName работает корректно в приведённом ниже коде:
Значение «this»
Неважно, где находится метод: в объекте или его прототипе. При вызове метода this — всегда объект перед точкой.
Это на самом деле очень важная деталь, потому что у нас может быть большой объект со множеством методов, от которого можно наследовать. Затем наследующие объекты могут вызывать его методы, но они будут изменять своё состояние, а не состояние объекта-родителя.
Например, здесь animal представляет собой «хранилище методов», и rabbit использует его.
Введение в prototype.js
Подключаюсь к разработке проекта, в котором используется этот замечательный js-фреймворк. До этого использовал только jQuery, поэтому пришлось изучать эту новую для меня библиотеку.
Второе место, куда я пошел за информацией, после Википедии, был Хабр. С удивлением обнаружил не обнаружил здесь блога, посвященного Prototype и более того, никакой информации «для новичков». Решил исправить этот недостаток.
Все заинтересованных — прошу под кат
Введение
Для начала, хочу отметить, что данный топик — не место для холивара, вида «X круче, чем Y». Я хочу рассказать только о возможностях данного фреймворка, не затрагивая другие.
Данный фреймоворк поддерживается Internet Explorer 6.0+, Mozilla Firefox 1.5+, Apple Safari 2.0+ и Opera 9.25+. Соответственно, его можно использовать в 99% проектов.
На текущий момент, последняя версия — 1.7, выпущена 22 ноября 2010.
Итак, мы скачали исходный код библиотеки и подключили её в нашем html-документе
Теперь рассмотрим возможности, которые нам стали доступны
Базовые возможности
Собственно, вся соль фреймворка изложена в 5-ти функциях. О них ниже.
$()
Здесь всё просто. Теперь
Более того, если функции передать несколько параметров, то она вернет массив элементов
Этот массив можно обработать в цикле, например
$$()
Функция разбивает один или несколько CSS-cелекторов, которые поступают на вход, и возвращает элементы которые соответствуют этим фильтрам
Данный код выведет:
My name
pass
Рассмотрим пример по-сложнее, когда на вход функции будет подано несколько фильтров
Здесь мы увидим следующий результат:
My name
pass
Password
$F()
Для кода выше, мы могли получить значения элементов формы следующим образом:
Как вы, наверное, уже догадались, результатом будет
My name
pass
Для лучшего понимания, следующие три конструкции аналогичны
Значения a, b, c будут равны
Получаем
3: Test 1
2: Test 2
4: Test 3
Каждый элемент hash-объекта — это массив из двух элементов: ключ и значение. Помимо этого, объект обладает 5-ю методами
keys() — возвращает массив из всех ключей
values() — возвращает массив из всех значений
merge(Hashes) — принимает объекты типа Hash, возвращает только один объект, результат их объединения
toQueryString() — преобраовывает объект в строку query-string. Т.е строку вида «key1=value1&key2=value2&key3=value3»
inspect() — возвращает объект в формате массива, вида «ключ: значение»
Полезные функции
И рассмотрим еще несколько функций, без которых жизнь не была бы столь прекрасна
getElementsByClassName()
Работает аналогично функции getElementsByTagName(). Отличие лишь в том, что необходимо подавать не имя тега, а название класса. В массиве возвращаются все элементы, которые соответствуют указанному классу. Функция работает даже в том случае, если для элемента определено несколько классов.
Думаю, и без примера всё ясно.
В итоге, напечатается
первый
второй
А сама функция вернет 2.
Думаю, здесь всё понятно. Незаменимый инструмент при отладке
Еще одной полезной возможностью библиотеки, является работа с текстовыми шаблонами.
Получим:
Вы заказываете 1шт. товара Книга по 24.50р. каждая
Вы заказываете 3шт. товара Ручка по 5.44р. каждая
Вы заказываете 4шт. товара Тетрадь по 10.00р. каждая
Ну и разумеется, в современном мире нельзя закончить, не сказав об AJAX. Теперь AJAX-запрос можно выполнить следующим образом:
Метод — get или post.
Параметры — вида ключ=значение, объединённые в Query-string.
OnComplete — функция, которая будет вызвана, после завершения AJAX-запроса
Заключение
В библиотеке prototype.js множество замечательных возможностей, которые могут облегчить жизнь разработчику и которые просто нельзя описать в небольшой статье.
Спасибо, если вы дочитали до этого места.
Полезные ссылки
Официальный сайт проекта. Здесь вы можете скачать последнюю версию фреймворка и ознакомиться с официальной документацией