Array.prototype в JavaScript — прототип і методи масиву

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.eyeColor = eyecolor;
}

Person.prototype.nationality = "Ukrainian";

HTML

<header>
  <h2 class="title">Розширення Array: myUcase() і myLcase()</h2>
  <p class="description">Розширюємо вбудований об'єкт Array в JavaScript, додаючи нові методи myUcase() та myLcase(), які переводять рядкові елементи масиву в верхній та нижній регістр відповідно.</p>
</header>
<main>
  <div class="result">
    <h3 class="result-title">Оригінальний масив:</h3>
    <pre id="originalArray"></pre>
    <h3 class="result-title">Масив після myUcase():</h3>
    <pre id="uppercasedArray"></pre>
    <h3 class="result-title">Масив після myLcase():</h3>
    <pre id="lowercasedArray"></pre>
  </div>
</main>

CSS

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

pre {
  color: #ff0000;
  letter-spacing: 1px;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.result-title {
  font-weight: bold;
  color: #333;
}

JS

Array.prototype.myUcase = function () {
  for (let i = 0; i < this.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (typeof this[i] === "string") {
      this[i] = this[i].toUpperCase();
    }
  }window.CP.exitedLoop(0);
};

Array.prototype.myLcase = function () {
  for (let i = 0; i < this.length; i++) {if (window.CP.shouldStopExecution(1)) break;
    if (typeof this[i] === "string") {
      this[i] = this[i].toLowerCase();
    }
  }window.CP.exitedLoop(1);
};

var fruits = ["Banana", "Orange", "Apple", "Mango", 123, "Kiwi"];
document.getElementById('originalArray').innerText = JSON.stringify(fruits, null, 2);

fruits.myUcase();
document.getElementById('uppercasedArray').innerText = JSON.stringify(fruits, null, 2);

fruits.myLcase();
document.getElementById('lowercasedArray').innerText = JSON.stringify(fruits, null, 2);
//# sourceURL=pen.js

// Array.prototype — це сам по собі порожній масив
console.log('Array.isArray(Array.prototype):', Array.isArray(Array.prototype)); // true
console.log('його length:', Array.prototype.length);                            // 0

const arr = [10, 20];

// ⚠️ у ЕКЗЕМПЛЯРА властивості prototype немає — це часта плутанина
console.log('arr.prototype:', arr.prototype);                                   // undefined
console.log('справжній прототип:', Object.getPrototypeOf(arr) === Array.prototype); // true
console.log('методи беруться звідти:', arr.map === Array.prototype.map);        // true

// далі ланцюжок веде до Object.prototype і завершується null
console.log('над ним Object.prototype:', Object.getPrototypeOf(Array.prototype) === Object.prototype); // true
console.log('а над тим:', Object.getPrototypeOf(Object.prototype));             // null

// методи можна позичати чужим об'єктам
const arrayLike = { 0: 'а', 1: 'б', length: 2 };
console.log('slice на псевдомасиві:', Array.prototype.slice.call(arrayLike));   // ["а","б"]
console.log('map на рядку:', Array.prototype.map.call('абв', (c) => c.toUpperCase())); // ["А","Б","В"]

// а тепер класична пастка розширення прототипу
Array.prototype.average = function () {
    return this.reduce((a, b) => a + b, 0) / this.length;
};
console.log('свій метод працює:', [2, 4, 6].average());                         // 4

const keys = [];
for (const k in [10, 20]) { keys.push(k); }
console.log('for...in зачепив чужий метод:', keys);                             // ["0","1","average"]

const values = [];
for (const v of [10, 20]) { values.push(v); }
console.log('for...of не зачепив:', values, '/ length:', [10, 20].length);      // [10,20] / 2

delete Array.prototype.average;

// правильний спосіб — неперелічувана властивість
Object.defineProperty(Array.prototype, 'average', {
    value: function () { return this.reduce((a, b) => a + b, 0) / this.length; },
    enumerable: false,
    configurable: true,
});

const keys2 = [];
for (const k in [10, 20]) { keys2.push(k); }
console.log('після defineProperty for...in чистий:', keys2, '/ метод живий:', [2, 4, 6].average()); // ["0","1"] / 4

// саму властивість Array.prototype перезаписати не можна
const d = Object.getOwnPropertyDescriptor(Array, 'prototype');
console.log('writable:', d.writable, '| configurable:', d.configurable);        // false | false