Прототипы в 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, у нас появляется метод myObjectgetName.

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.

• Комментарии