JavaScript с нуля

И снова приветствуем прототип!

Расширение встроенного объекта новой функциональностью звучит сложно, но на деле, как только вы поймете, что нужно сделать, это окажется достаточно просто. Для простоты усвоения этого материала мы рассмотрим комбинацию образца кода и диаграмм с участием дружелюбно настроенного объекта Array:

let tempArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Если бы мы построили диаграмму всей иерархии объекта tempArray, то выглядела бы она, как показано на рис. 19.1.

Рис. 19.1. Паутина объектов (или лжи!), которые существуют под поверхностью

Слева у нас объект tempArray, являющийся экземпляром Array.prototype, который, в свою очередь, является экземпляром основного Object.prototype. Теперь нам нужно расширить возможности нашего массива функцией shuffle. Это означает, что нужно найти способ внедрить эту функцию в Array.prototype, как показывает рис. 19.2.

Рис. 19.2. Здесь должна поселиться наша функция shuffle!

Здесь мы сталкиваемся с проявлением пресловутой странности JavaScript. У нас нет доступа к коду, формирующему функциональность массива. Мы также не можем найти функцию или объект, формирующие сам Array, и внедрить shuffle в них, как это делается в случае с пользовательским объектом. Наши встроенные объекты, подобные Array, определены в вулканических глубинах браузера, куда ни одно человеческое существо не может попасть. Поэтому здесь нам нужен иной подход.

При этом другом подходе мы тайком прокрадываемся и прикрепляем нужную функциональность к свойству prototype объекта Array. Выглядит это примерно так:

Array.prototype.shuffle = function () {

let input = this;

for (let i = input.length — 1; i >= 0; i-) {

let randomIndex = Math.floor(Math.random() * (i + 1));

let itemAtIndex = input[randomIndex];

input[randomIndex] = input[i];

input[i] = itemAtIndex;

}

return input;

}

Обратите внимание, что наша функция shuffle объявлена в Array.prototype. Как часть этого прикрепления мы внесли небольшое изменение в работу функции. Теперь она не получает аргумент для обращения к массиву, который нужно перемешать:

function shuffle(input) {

.

.

.

.

.

}

Вместо этого, так как отныне функция является частью Array, на этот массив указывает ключевое слово this внутри ее тела:

Array.prototype.shuffle = function () {

let input = this;

.

.

.

.

}

Возвращаясь к предыдущему шагу, как только этот код будет запущен, функция shuffle окажется бок о бок со встроенными методами, которые объект Array выражает через Array.prototype, как показано на рис. 19.3.

Рис. 19.3. Великий успех! Теперь функция shuffle на своем месте

С этого момента, если нам понадобится обратиться к возможностям shuffle, мы можем использовать для этого изначально желаемый подход:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

numbers.shuffle();

Самое лучшее в этом то, что создаваемые нами массивы будут также по умолчанию иметь доступ к функциональности shuffle благодаря принципам работы наследования прототипов.