Прототипы в JavaScript
Когда вы определяете функцию в JavaScript она получает несколько предопределённых свойств. Одним из таких свойств является мнимый прототип. В данном уроке мы рассмотрим, что такое прототип, зачем и когда его нужно использовать.
Что такое прототип?
Свойство прототип - изначально пустой объект. Вы можете добавлять к нему члены, как и для любого другого объекта:
var myObject = function(name){ this.name = name; return this; }; console.log(typeof myObject.prototype); // Объект myObject.prototype.getName = function(){ return this.name; };
В выше приведенном примере мы создали функцию. Но если вызвать myObject()
, то она просто вернет объект window
, так как определена в глобальном контексте. Следовательно, this
возвращает глобальный объект, так как еще не было инициализации (подробнее далее в тексте урока).
console.log(myObject() === window); // true
Секретная ссылка
Прежде чем продолжить, нужно обсудить "секретную" ссылку, которая заставляет прототип работать так, как он работает.
Каждый объект в JavaScript имеет "секретное" свойство, которое добавляется при определении или инициализации объекта. Данное свойство имеет имя __proto__
. Именно через него осуществляется доступ к цепочке прототипа. Однако использование __proto__
в своем приложении является плохой идеей, так как не все браузеры обеспечивают доступ к нему.
Свойство __proto__
не следует путать с прототипом объекта. Это два разных свойства и они действуют взаимосвязано. Важно понимать различия, так как на первых порах очень легко запутаться. Давайте разберемся детально. Когда мы создаем функцию myObject
, то определяем объект типа Function
.
console.log(typeof myObject); // function
Function
- предопределённый объект в JavaScript и, следовательно, он имеет свои собственные свойства (например, length
и arguments
) и методы (например, call
и apply
). А также свой собственный прототип объекта и ссылку __proto__
. Все выше сказанное означает, что где-то внутри механизма JavaScript, есть код, который делает следующую операцию:
Function.prototype = { arguments: null, length: 0, call: function(){ // секретный код }, apply: function(){ // секретный код } ... }
В действительности все не так просто. Здесь мы приводим только иллюстративную часть для демонстрации работы цепочки прототипа.
Итак, мы определяем myObject
как функцию и даем ей один аргумент name
, но не устанавливаем никаких других свойств, таких как length,
или методов, таких как call
. Почему же тогда работает следующий код?
console.log(myObject.length); // 1 (количество доступных аргументов)
Потому, что когда мы определяем myObject
, то создается свойство __proto__
и ему назначается значение Function.prototype
(как было описано выше). Поэтому, когда мы обращаемся к myObject.length
, происходит поиск свойства length
у объекта myObject
, и при отсутствии оного осуществляется переход по цепочке с помощью ссылки __proto__ link
, находится свойство и возвращается его значение.
Можно удивиться. почему length
имеет значение 1
, а не 0
(или любое другое число). Потому, что myObject
в действительности является реализацией Function
.
console.log(myObject instanceof Function); // true console.log(myObject === Function); // false
Когда создается релаизация объекта, свойство __proto__
начинает указывать на конструктор прототипа, который в нашем случае представляет собой Function
.
console.log(myObject.__proto__ === Function.prototype) // true
Дополнительно, когда вы создаете новый объект Function
, код конструктора Function
подсчитывает количество аргументов и обновляет свойство this.length
соответствующим образом. В нашем случае аргумент 1
.
Но если мы создаем реализацию myObject
с помощью ключевого слова new
, __proto__
указывает на myObject.prototype,
так как myObject
является конструктором новой реализации.
var myInstance = new myObject(“foo”); console.log(myInstance.__proto__ === myObject.prototype); // true
В дополнение к методам в прототипа Function
, например, к call
и apply
, у нас появляется метод myObject
getName
.
console.log(myInstance.getName()); // foo var mySecondInstance = new myObject(“bar”); console.log(mySecondInstance.getName()); // bar console.log(myInstance.getName()); // foo
Таким образом мы можем создавать столько реализаций объекта, сколько нужно.
Зачем использовать прототип?
Например, при разработке игры нужно несколько (возможно, сотню) объектов отображать на экране. Каждый объект имеет свои свойства, такие как координаты x
и y
, width
,height
, и другие.
Можно сделать так:
var GameObject1 = { x: Math.floor((Math.random() * myCanvasWidth) + 1), y: Math.floor((Math.random() * myCanvasHeight) + 1), width: 10, height: 10, draw: function(){ myCanvasContext.fillRect(this.x, this.y, this.width, this.height); } ... }; var GameObject2 = { x: Math.floor((Math.random() * myCanvasWidth) + 1), y: Math.floor((Math.random() * myCanvasHeight) + 1), width: 10, height: 10, draw: function(){ myCanvasContext.fillRect(this.x, this.y, this.width, this.height); } ... };
И еще 98 раз.
Все эти объекты создаются и хранятся в памяти - с отдельными реализациями нужных методов. Такой подход очень далек от идеала - игра будет перегружать брауззер. что может в конечном итоге привести к зависанию.
Но можно сохранить эффективность работы приложения. Нужно все лишь создать сотню разных объектов с единственным объектом prototype
.
Как использовать прототип?
Для того, чтобы увеличить производительность приложения, мы можем (пере)определить свойство прототипа GameObject
. Каждый экземпляр GameObject
будет ссылаться на методы в GameObject.prototype
так, как будто они принадлежат ему.
// Определяем конструктор GameObject var GameObject = function(width, height) { this.x = Math.floor((Math.random() * myCanvasWidth) + 1); this.y = Math.floor((Math.random() * myCanvasHeight) + 1); this.width = width; this.height = height; return this; }; // (Пере)определяем прототип GameObject GameObject.prototype = { x: 0, y: 0, width: 5, width: 5, draw: function() { myCanvasContext.fillRect(this.x, this.y, this.width, this.height); } };
Теперь создаем 100 реализаций GameObject
.
var x = 100, arrayOfGameObjects = []; do { arrayOfGameObjects.push(new GameObject(10, 10)); } while(x--);
У нас есть массив со ста объектами GameObject
, которые используют общий прототип и определение метода draw
, что существенно экономит память приложения.
Вызов метода draw
осуществляется очень просто:
var GameLoop = function() { for(gameObject in arrayOfGameObjects) { gameObject.draw(); } };
Прототип - обычный объект
Прототип является обычным объектом. Если после создания всех экземпляров GameObject
, мы решим выводить круги вместо прямоугольников, то можно просто обновить метод GameObject.prototype.draw
.
GameObject.prototype.draw = function() { myCanvasContext.arc(this.x, this.y, this.width, 0, Math.PI*2, true); }
И теперь все предыдущие и будущие реализации GameObject
будут рисовать круги.
Изменение предопределенного прототипа.
Да, такое возможно. Может быть вы знакомы с библиотеками JavaScript, например, Prototype, которые используют данную возможность.
Например:
String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ‘’); };
Теперь можно использовать данный метод для любой строки:
“ foo bar “.trim(); // “foo bar”
Но у данного способа есть обратная сторона. Например, вы можете использовать выше описанный метод в своих приложениях, но в новой версии браузера может появиться предопределенный метод trim
в прототипе String
. Таким образом, ваше определение trim
будет изменять предопределнное! Ой! Для преодоления данной проблемы можно использовать проверку.
if(!String.prototype.trim) { String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ‘’); }; }
Хотя, обычно следует избегать изменения предопределенных прототипов.
Заключение
Прототипы помогают создавать более эффективные приложения JavaScript.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/-nc6KLqCgFA/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Бог тянет за одну руку, а черт - за обе ноги Буш Вильгельм - (1832-1908) - немецкий поэт и художник |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.