JavaScript с нуля - [44]

// и результат…

console.log(shuffleArray);

После выполнения этого кода конечным результатом будет перегруппировка содержимого. Такая функциональность весьма полезна. Я бы даже сказал, что слишком полезна. Возможность производить перемешивание должна быть частью объекта Array и являться легко доступной наряду с такими его методами, как push, pop, slice и др.

Если бы функция shuffle была частью объекта array, то мы могли бы с легкостью использовать ее следующим образом:

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

shuffleArray.shuffle();

В этом примере мы расширяем встроенный объект (Array) заданной нами функциональностью (shuffle). В нескольких последующих разделах мы конкретно рассмотрим, как это делается, как работает и почему расширение встроенных объектов является спорным решением.

Поехали!

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

Расширение встроенного объекта новой функциональностью звучит сложно, но на деле, как только вы поймете, что нужно сделать, это окажется достаточно просто. Для простоты усвоения этого материала мы рассмотрим комбинацию образца кода и диаграмм с участием дружелюбно настроенного объекта 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 благодаря принципам работы наследования прототипов.

Спорность расширения встроенных объектов

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

Вы не контролируете будущее встроенного объекта

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

Некоторую функциональность не следует расширять или переопределять

Ничто не мешает вам использовать полученные здесь знания для изменения существующих методов и свойств. Например, в следующем примере я меняю поведение slice:

Array.prototype.slice = function () {

let input = this;

input[0] = "This is an awesome example!";

return input;

}

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

// и результат будет…

console.log(tempArray);

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

Что почитать

Подробное обсуждение этого противоречия ищите на ветке StackOverflow: http://stackoverflow.com/questions/8859828/.