path: root/files/uk/web/javascript/reference/global_objects/object/defineproperty/index.html

---
title: Object.defineProperty()
slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
tags:
  - ECMAScript 5
  - JavaScript
  - Об'єкт
  - метод
translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
---
<div>{{JSRef}}</div>

<p>Статичний метод <code><strong>Object.defineProperty()</strong></code> визначає нову властивість безпосередньо на об'єкті, або модифікує існуючу властивість на об'єкті, та повертає об'єкт.</p>

<div class="blockIndicator note">
<p><strong>Заувага:</strong> Цей метод викликається прямо на конструкторі {{jsxref("Object")}}, а не на екземплярі типу <code>Object</code>.</p>
</div>

<p>{{EmbedInteractiveExample("pages/js/object-defineproperty.html")}}</p>

<div class="hidden">
<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
</div>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="syntaxbox"><code>Object.defineProperty(<var>obj</var>, <var>prop</var>, <var>descriptor</var>)</code></pre>

<h3 id="Параметри">Параметри</h3>

<dl>
 <dt><code>obj</code></dt>
 <dd>Об'єкт, на якому визначається властивість.</dd>
 <dt><code>prop</code></dt>
 <dd>Ім'я або {{jsxref("Symbol", "символ")}} властивості для визначення чи модифікації.</dd>
 <dt><code>descriptor</code></dt>
 <dd>Дескриптор для властивості, що модифікується чи визначається.</dd>
</dl>

<h3 id="Значення_що_повертається">Значення, що повертається</h3>

<p>Об'єкт, що був переданий у функцію.</p>

<h2 id="Опис">Опис</h2>

<p>Цей метод дозволяє точно додавати чи модифікувати властивість об'єкту. Звичайне додавання властивості через призначення створює властивості, які з'являються під час переліку властивостей (цикл {{jsxref("Statements/for...in", "for...in")}} або метод {{jsxref("Object.keys")}}), чиї значення можуть бути змінені та можуть бути {{jsxref("Operators/delete", "видалені", "", 1)}}. Даний метод дозволяє змінити ці додаткові деталі у стані за замовчуванням. За замовчуванням, значення, додані за допомогою <code>Object.defineProperty()</code>, є незмінними.</p>

<p>Дескриптори властивостей у об'єктах бувають двох основних видів: дескриптори даних та дескриптори доступу. <em>Дескриптор даних</em> - це властивість, що має значення, яке може бути або не бути доступне для запису. <em>Дескриптор доступу</em> -<dfn> це властивість, описана парою функцій </dfn>гетер-сетер. Дескриптор має бути одного з двох видів, і не може належати до обох.</p>

<p>І дескриптори даних, і дескриптори доступу є об'єктами. Вони мають наступні необов'язкові ключі (Значення за замовчуванням у випадку визначення властивостей через Object.defineProperty()):</p>

<dl>
 <dt><code>configurable</code></dt>
 <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли тип цього дескриптора властивості може бути змінений, та якщо властивість може бути видалена з відповідного об'єкту.<br>
 <strong>За замовчуванням <code>false</code>.</strong></dd>
 <dt><code>enumerable</code></dt>
 <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли ця властивість з'являється під час переліку властивостей на відповідному об'єкті..<br>
 <strong>За замовчуванням <code>false</code>.</strong></dd>
</dl>

<p>Дескриптор даних також має наступні необов'язкові ключі:</p>

<dl>
 <dt><code>value</code></dt>
 <dd>Значення, пов'язане з властивістю. Може бути будь-яким з чинних значень JavaScript (числом, об'єктом, функцією і т. д.).<br>
 <strong>За замовчуванням {{jsxref("undefined")}}.</strong></dd>
 <dt><code>writable</code></dt>
 <dd>Дорівнює <code>true</code> тоді й тільки тоді, коли значення, пов'язане з властивістю, може бути змінене за допомогою {{jsxref("Operators/Assignment_Operators", "оператора присвоєння", "", 1)}}.<br>
 <strong>За замовчуванням <code>false</code>.</strong></dd>
</dl>

<p>Дескриптор доступу також має наступні необов'язкові ключі:</p>

<dl>
 <dt><code>get</code></dt>
 <dd>Функція, що служить гетером властивості, або {{jsxref("undefined")}}, якщо гетера немає. Коли відбувається звернення до властивості, ця функція викликається без аргументів, а <code>this</code> присвоюється об'єкт, через який відбулось звернення до властивості (це може бути не той об'єкт, на якому властивість була визначена, через наслідування).<br>
 <strong>За замовчуванням {{jsxref("undefined")}}.</strong></dd>
 <dt><code>set</code></dt>
 <dd>Функція, що служить сетером властивості, або {{jsxref("undefined")}}, якщо сетера немає. Коли властивості присвоюється значення, функція викликається з одним аргументом (значення, яке присвоюється), а <code>this</code> присвоюється об'єкт, через який відбувається присвоєння.<br>
 <strong>За замовчуванням {{jsxref("undefined")}}.</strong></dd>
</dl>

<p>Якщо в дескриптора немає жодного з ключів <code>value</code>, <code>writable</code>, <code>get</code> або <code>set</code>, він сприймається як дескриптор даних. Якщо дескриптор має і <code>value</code> або <code>writable</code>, і <code>get</code> або <code>set</code>, викидається виняток.</p>

<p>Майте на увазі, що ці атрибути не обов'язково є особистими властивостями дескриптора. Успадковані властивості також будуть враховуватись. Щоб впевнитись, що значення за замовчуванням збережуться, ви можете заморозити {{jsxref("Object.prototype")}} заздалегідь, явно вказуючи всі опції, або вказати {{jsxref("null")}} через {{jsxref("Object.create", "Object.create(null)")}}.</p>

<pre class="brush: js">// використовуючи __proto__
var obj = {};
var descriptor = Object.create(null); // немає успадкованих властивостей
// за замовчуванням недоступний для запису, переліку та налаштування
descriptor.value = 'static';
Object.defineProperty(obj, 'key', descriptor);

// явно задані ключі
Object.defineProperty(obj, 'key', {
  enumerable: false,
  configurable: false,
  writable: false,
  value: 'static'
});

// перероблення того самого об'єкта
function withValue(value) {
  var d = withValue.d || (
    withValue.d = {
      enumerable: false,
      writable: false,
      configurable: false,
      value: null
    }
  );

  // уникаємо дублювання операції присвоєння значення
  if (d.value !== value) d.value = value;

  return d;
}
// ... і ...
Object.defineProperty(obj, 'key', withValue('static'));

// якщо замороження доступне, воно запобігає додаванню або
// видаленню властивостей прототипу об'єкта
// (value, get, set, enumerable, writable, configurable)
(Object.freeze || Object)(Object.prototype);</pre>

<h2 id="Приклади">Приклади</h2>

<p>Якщо хочете дізнатись, як використовувати метод <code>Object.defineProperty</code> з двійковими прапорами, дивіться <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">додаткові приклади</a>.</p>

<h3 id="Створення_властивості">Створення властивості</h3>

<p>Коли зазначеної властивості в об'єкті не існує, <code>Object.defineProperty()</code> створює нову властивість за описом. Поля можуть бути пропущені у дескрипторі, тоді для цих полів будуть задані значення за замовчуванням.</p>

<pre class="brush: js">var o = {}; // Створює новий об'єкт

// Приклад властивості об'єкта, доданої
// за допомогою defineProperty з дескриптором даних
Object.defineProperty(o, 'a', {
  value: 37,
  writable: true,
  enumerable: true,
  configurable: true
});
// Властивість 'а' існує в об'єкті o, її значення дорівнює 37

// Приклад властивості об'єкта, доданої
// за допомогою defineProperty з дескриптором доступу
var bValue = 38;
Object.defineProperty(o, 'b', {
  get: function() { return bValue; },
  set: function(newValue) { bValue = newValue; },
  enumerable: true,
  configurable: true
});
o.b; // 38
// Властивість 'b' існує в об'єкті o, її значення дорівнює 38
// Значення o.b тепер завжди ідентичне bValue,
// якщо o.b не була перевизначена

// Не можна змішувати обидва типи
Object.defineProperty(o, 'conflict', {
  value: 0x9f91102,
  get: function() { return 0xdeadbeef; }
});
// викидає TypeError: value існує
// тільки в дескрипторах даних,
// get існує тільки в дескрипторах доступу</pre>

<h3 id="Модифікація_властивості">Модифікація властивості</h3>

<p>Коли властивість вже існує, <code>Object.defineProperty()</code> намагається модифікувати властивість згідно значень у дескрипторі та поточної конфігурації об'єкта. Якщо атрибут <code>configurable</code> старого дескриптора дорівнював <code>false</code>, властивість вважається недоступною для налаштування. Неможливо змінити жоден атрибут властивості-аксесора, недоступної для налаштування. Для властивості-значення можливо змінити значення, якщо властивість доступна для запису, також можливо змінити атрибут <code>writable</code> з <code>true</code> на <code>false</code>. Неможливо переключатись між типами властивостей, коли властивість недоступна для налаштування.</p>

<p>Помилка {{jsxref("TypeError")}} викидається при спробах змінити атрибути властивості, недоступної для налаштування (окрім <code>value</code> та <code>writable</code>, якщо їх дозволено змінювати), крім випадку, коли поточне та нове значення однакові.</p>

<h4 id="Атрибут_writable">Атрибут writable</h4>

<p>Коли атрибут властивості <code>writable</code> встановлений у <code>false</code>, властивість вважається недоступною для запису. Їй не можна переприсвоїти значення.</p>

<pre class="brush: js">var o = {}; // Створює новий об'єкт

Object.defineProperty(o, 'a', {
  value: 37,
  writable: false
});

console.log(o.a); // виводить 37
o.a = 25; // Помилка не викидається
// (Викидалась би у строгому режимі,
// навіть якщо значеня таке саме)
console.log(o.a); // виводить 37. Присвоєння не спрацювало.

// строгий режим
(function() {
  'use strict';
  var o = {};
  Object.defineProperty(o, 'b', {
    value: 2,
    writable: false
  });
  o.b = 3; // викидає TypeError: "b" доступна лише для читання
  return o.b; // без попереднього рядка вертає 2
}());</pre>

<p class="brush: js">Як видно з прикладу, спроби запису у властивість, недоступну для запису, не змінюють її, але й не викидають помилки.</p>

<h4 id="Атрибут_enumerable">Атрибут enumerable</h4>

<p>Атрибут властивості <code>enumerable</code> визначає, чи буде властивість підхоплена методом {{jsxref("Object.assign()")}} або оператором <a href="/uk/docs/Web/JavaScript/Reference/Operators/Spread_syntax">розкладу</a>. Для не {{jsxref("Symbols", "символьних")}} властивостей він також визначає, чи буде властивість з'являтись у циклі {{jsxref("Statements/for...in", "for...in")}} та у {{jsxref("Object.keys()")}}, чи ні.</p>

<pre class="brush: js">var o = {};
Object.defineProperty(o, 'a', {
  value: 1,
  enumerable: true
});
Object.defineProperty(o, 'b', {
  value: 2,
  enumerable: false
});
Object.defineProperty(o, 'c', {
  value: 3
}); // enumerable за замовчуванням дорівнює false
o.d = 4; // enumerable за замовчуванням дорівнює true,
         // якщо властивість створюється через присвоєння
Object.defineProperty(o, Symbol.for('e'), {
  value: 5,
  enumerable: true
});
Object.defineProperty(o, Symbol.for('f'), {
  value: 6,
  enumerable: false
});

for (var i in o) {
  console.log(i);
}
// виводить 'a' та 'd' (у невизначеному порядку)

Object.keys(o); // ['a', 'd']

o.propertyIsEnumerable('a'); // true
o.propertyIsEnumerable('b'); // false
o.propertyIsEnumerable('c'); // false
o.propertyIsEnumerable('d'); // true
o.propertyIsEnumerable(Symbol.for('e')); // true
o.propertyIsEnumerable(Symbol.for('f')); // false

var p = { ...o }
p.a // 1
p.b // undefined
p.c // undefined
p.d // 4
p[Symbol.for('e')] // 5
p[Symbol.for('f')] // undefined</pre>

<h4 id="Атрибут_configurable">Атрибут configurable</h4>

<p>Атрибут <code>configurable</code> контролює одночасно, чи може властивість бути видалена з об'єкту, та чи можуть її атрибути (інші, крім <code>value</code> та <code>writable</code>) бути змінені.</p>

<pre class="brush: js">var o = {};
Object.defineProperty(o, 'a', {
  get() { return 1; },
  configurable: false
});

Object.defineProperty(o, 'a', {
  configurable: true
}); // викидає TypeError
Object.defineProperty(o, 'a', {
  enumerable: true
}); // викидає TypeError
Object.defineProperty(o, 'a', {
  set() {}
}); // викидає TypeError (set не був визначений попередньо)
Object.defineProperty(o, 'a', {
  get() { return 1; }
}); // викидає TypeError
// (хоча новий get робить рівно те саме)
Object.defineProperty(o, 'a', {
  value: 12
}); // викидає TypeError
// ('value' можна змінити, коли 'configurable' дорівнює false,
// але не у цьому випадку, через аксесор 'get')

console.log(o.a); // виводить 1
delete o.a; // Нічого не відбувається
console.log(o.a); // виводить 1</pre>

<p>Якби атрибут <code>configurable</code> властивості <code>o.a</code> дорівнював <code>true</code>, жодна з помилок не з'явилася б, і властивість була б видалена наприкінці.</p>

<h3 id="Додавання_властивостей_та_значень_за_замовчуванням">Додавання властивостей та значень за замовчуванням</h3>

<p>Важливо враховувати, яким чином задаються значення атрибутів за замовчуванням. Часто є різниця між простим присвоєнням значення через крапкову нотацію та використанням <code>Object.defineProperty()</code>, як показано нижче у прикладі.</p>

<pre class="brush: js">var o = {};

o.a = 1;
// є еквівалентом:
Object.defineProperty(o, 'a', {
  value: 1,
  writable: true,
  configurable: true,
  enumerable: true
});

// З іншого боку,
Object.defineProperty(o, 'a', { value: 1 });
// є еквівалентом:
Object.defineProperty(o, 'a', {
  value: 1,
  writable: false,
  configurable: false,
  enumerable: false
});
</pre>

<h3 id="Користувацьки_сетери_та_гетери">Користувацьки сетери та гетери</h3>

<p>Приклад нижче показує, як реалізувати об'єкт, що самоархівується. Коли призначається властивість <code>temperature</code>, масив <code>archive</code> отримує запис журналу подій.</p>

<pre class="brush: js">function Archiver() {
  var temperature = null;
  var archive = [];

  Object.defineProperty(this, 'temperature', {
    get: function() {
      console.log('get!');
      return temperature;
    },
    set: function(value) {
      temperature = value;
      archive.push({ val: temperature });
    }
  });

  this.getArchive = function() { return archive; };
}

var arc = new Archiver();
arc.temperature; // 'get!'
arc.temperature = 11;
arc.temperature = 13;
arc.getArchive(); // [{ val: 11 }, { val: 13 }]
</pre>

<p>У цьому прикладі гетер завжди повертає одне й те саме значення.</p>

<pre class="brush: js">var pattern = {
    get() {
        return 'Що б ти не призначив, ' +
               'я завжди повертаю цей рядок';
    },
    set() {
        this.myname = "Це рядок з моїм ім'ям";
    }
};

function TestDefineSetAndGet() {
    Object.defineProperty(this, 'myproperty', pattern);
}

var instance = new TestDefineSetAndGet();
instance.myproperty = 'тест';
console.log(instance.myproperty);
// Що б ти не призначив, я завжди повертаю цей рядок

console.log(instance.myname); // Це рядок з моїм ім'ям</pre>

<h3 id="Успадкування_властивостей">Успадкування властивостей</h3>

<p>Якщо властивість-аксесор була успадкована, її методи <code>get</code> та <code>set</code> викликатимуться при зверненні до властивості та будуть модифіковані на об'єктах-нащадках. Якщо ці методи використовують змінну для зберігання значення, це значення буде спільним для усіх об'єктів.</p>

<pre class="brush: js">function myclass() {
}

var value;
Object.defineProperty(myclass.prototype, "x", {
  get() {
    return value;
  },
  set(x) {
    value = x;
  }
});

var a = new myclass();
var b = new myclass();
a.x = 1;
console.log(b.x); // 1</pre>

<p>Це можна виправити, зберігаючи значення у іншій властивості. У методах <code>get</code> та <code>set</code> <code>this</code> вказує на об'єкт, що використовується для звернення або для модифікації властивості.</p>

<pre class="brush: js">function myclass() {
}

Object.defineProperty(myclass.prototype, "x", {
  get() {
    return this.stored_x;
  },
  set(x) {
    this.stored_x = x;
  }
});

var a = new myclass();
var b = new myclass();
a.x = 1;
console.log(b.x); // undefined</pre>

<p>На відміну від властивостей-аксесорів, властивості-значення завжди присвоюються самому об'єкту, а не прототипу. Проте, якщо успадковується властивість-значення, недоступна для запису, це все одно не дозволяє змінювати властивість на об'єкті.</p>

<pre class="brush: js">function myclass() {
}

myclass.prototype.x = 1;
Object.defineProperty(myclass.prototype, "y", {
  writable: false,
  value: 1
});

var a = new myclass();
a.x = 2;
console.log(a.x); // 2
console.log(myclass.prototype.x); // 1
a.y = 2; // Ігнорується, викидає виняток у строгому режимі
console.log(a.y); // 1
console.log(myclass.prototype.y); // 1</pre>

<h2 id="Специфікації">Специфікації</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Специфікація</th>
   <th scope="col">Статус</th>
   <th scope="col">Коментар</th>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.2.3.6', 'Object.defineProperty')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>Початкове визначення. Реалізоване у JavaScript 1.8.5.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-object.defineproperty', 'Object.defineProperty')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>

<div class="hidden">
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>

<p>{{Compat("javascript.builtins.Object.defineProperty")}}</p>

<h2 id="Примітки_щодо_сумісності">Примітки щодо сумісності</h2>

<h3 id="Перевизначення_властивості_length_обєкта_Array">Перевизначення властивості <code>length</code> об'єкта <code>Array</code></h3>

<p>Можливість перевизначити властивість масивів {{jsxref("Array.length", "length")}} є предметом звичайних обмежень. (Властивість {{jsxref("Array.length", "length")}} початково недоступна для налаштування та переліку, і доступна для запису. Таким чином, для незміненого масиву можливо змінити значення властивості {{jsxref("Array.length", "length")}} або зробити її недоступною для запису. Неможливо змінити її доступність для переліку чи налаштування, або, якщо вона недоступна для запису, змінити її значення чи доступність для запису.) Однак, не усі переглядачі дозволяють це перевизначення.</p>

<p>Firefox від 4 до 22 викине {{jsxref("TypeError")}} на всяку спробу будь-яким чином (дозволено це чи ні) перевизначити властивість масиву {{jsxref("Array.length", "length")}}.</p>

<p>Версії Chrome, у яких реалізовано <code>Object.defineProperty()</code>, у певних обставинах ігнорують значення довжини масиву, відмінне від поточного значення властивості масиву {{jsxref("Array.length", "length")}}. У деяких обставинах зміна доступності для запису, схоже, непомітно не спрацьовує (і не викидає виняток). Разом з тим, деякі методи, що змінюють масив, такі як {{jsxref("Array.prototype.push")}}, не визнають недоступну для запису довжину масиву.</p>

<p>Версії Safari, у яких реалізовано <code>Object.defineProperty()</code>, ігнорують значення <code>length</code>, яке відрізняється від поточної властивості масиву {{jsxref("Array.length", "length")}}, і спроби змінити її доступність для запису не викидають помилки, але насправді не змінюють доступність властивості для запису.</p>

<p>Лише Internet Explorer 9 та новіші, а також Firefox 23 та новіші, схоже, повністю та коректно реалізують перевизначення властивості масивів {{jsxref("Array.length", "length")}}. На сьогоднішній день не варто покладатись на те, що перевизначення властивості масиву {{jsxref("Array.length", "length")}} працюватиме чи поводитиметься певним чином. І навіть коли ви <em>можете</em> на це покластись, <a href="http://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/">існує дуже вагома причина не робити цього</a>.</p>

<h3 id="Примітки_щодо_Internet_Explorer_8">Примітки щодо Internet Explorer 8</h3>

<p>Internet Explorer 8 реалізував метод <code>Object.defineProperty()</code>, який може використовуватись <a class="external" href="https://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx">тільки на об'єктах DOM</a>. Кілька моментів варто зазначити:</p>

<ul>
 <li>Спроби використати <code>Object.defineProperty()</code> на вбудованих об'єктах викине помилку.</li>
 <li>Атрибутам властивості мають бути надані певні значення. Атрибути <code>configurable</code>, <code>enumerable</code> та <code>writable</code> мають усі дорівнювати <code>true</code> для дескриптора даних, а також <code>true</code> для <code>configurable</code>, <code>false</code> для <code>enumerable</code> для дескриптора доступу.(?) Будь-яка спроба задати інше значення (?) призведе до викидання помилки.</li>
 <li>Переналаштування властивості вимагає спочатку видалення цієї властивості. Якщо властивість не була видалена, вона залишиться такою, як була до спроби переналаштування.</li>
</ul>

<h2 id="Див._також">Див. також</h2>

<ul>
 <li><a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">Перелічуваність та належність властивостей</a></li>
 <li>{{jsxref("Object.defineProperties()")}}</li>
 <li>{{jsxref("Object.propertyIsEnumerable()")}}</li>
 <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
 <li>{{jsxref("Object.prototype.watch()")}}</li>
 <li>{{jsxref("Object.prototype.unwatch()")}}</li>
 <li>{{jsxref("Operators/get", "get")}}</li>
 <li>{{jsxref("Operators/set", "set")}}</li>
 <li>{{jsxref("Object.create()")}}</li>
 <li><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">Додаткові приклади <code>Object.defineProperty</code></a></li>
 <li>{{jsxref("Reflect.defineProperty()")}}</li>
</ul>