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

---
title: Object.prototype.watch()
slug: Web/JavaScript/Reference/Global_Objects/Object/watch
tags:
  - JavaScript
  - Об'єкт
  - застарілий
  - метод
  - налагодження
translation_of: Archive/Web/JavaScript/Object.watch
---
<div>{{JSRef}}</div>

<div class="warning">
<p><strong>Застереження:</strong> Не використовуйте <code>watch()</code> та {{jsxref("Object.prototype.unwatch", "unwatch()")}}! Ці два методи були реалізовані лише у Firefox до 58-ї версії, вони <strong>застаріли та були прибрані у Firefox 58+</strong>. До того ж, використання точок спостереження має серйозний негативний вплив на продуктивність, особливо при використанні на глобальних об'єктах, таких як <code>window</code>. Звісно, ви можете, натомість, використовувати <a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">сетери та гетери</a> або <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Proxy">проксі</a>.</p>
</div>

<p>Метод <code><strong>watch()</strong></code> стежить за присвоєнням властивості значення, та запускає функцію, коли це відбувається.</p>

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

<pre class="syntaxbox"><code><var>obj</var>.watch(<var>prop</var>, <var>handler</var>)</code></pre>

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

<dl>
 <dt><code>prop</code></dt>
 <dd>Ім'я властивості об'єкта, за змінами якої ви бажаєте стежити.</dd>
 <dt><code>handler</code></dt>
 <dd>Функція, яка викликатиметься, коли значення вказаної властивості змінюється.</dd>
</dl>

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

<p>{{jsxref("undefined")}}.</p>

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

<p>Стежить за присвоєнням значень властивості <code>prop</code> у даному об'єкті, викликає <code>handler(prop, oldval, newval)</code>, коли присвоюється значення <code>prop</code>, та зберігає повернене значення у цій властивості. Точка спостереження може фільтрувати (або анулювати) присвоєння значення, повертаючи змінене значення <code>newval</code> (або повертаючи значення <code>oldval</code>).</p>

<p>Якщо ви видалите властивість, для якої встановлено точку спостереження, ця точка спостереження не зникає. Якщо ви пізніше заново створите властивість, точка спостереження продовжить діяти.</p>

<p>Щоб видалити точку спостереження, скористайтесь методом {{jsxref("Object.unwatch", "unwatch()")}}. За замовчуванням, метод <code>watch</code> успадковується кожним об'єктом, похідним від {{jsxref("Object")}}.</p>

<p>Налагоджувач JavaScript має функціональність, схожу на ту, що надає даний метод, а також інші налагоджувальні можливості. Інформацію щодо налагоджувача дивіться у статті <a href="/uk/docs/Venkman">Venkman</a>.</p>

<p>У Firefox <code>handler</code> викликається тільки з присвоєнь у скрипті, а не з нативного коду. Для прикладу, <code>window.watch('location', myHandler)</code> не викличе <code>myHandler</code>, якщо користувач натисне на посилання на закладку в активному документі. Однак, <code>window.location += '#myAnchor'</code> викличе <code>myHandler</code>.</p>

<div class="note">
<p><strong>Заувага:</strong> Виклик <code>watch()</code> на об'єкті для вказаної властивості перезаписує будь-який попередній обробник, призначений цій властивості.</p>
</div>

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

<h3 id="Використання_watch_та_unwatch">Використання <code>watch</code> та <code>unwatch</code></h3>

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

o.watch('p', function (id, oldval, newval) {
  console.log('Значення o.' + id + ' було змінене з ' + oldval + ' на ' + newval);
  return newval;
});

o.p = 2;
o.p = 3;
delete o.p;
o.p = 4;

o.unwatch('p');
o.p = 5;
</pre>

<p>Цей скрипт виведе наступне:</p>

<pre>Значення o.p було змінене з 1 на 2
Значення o.p було змінене з 2 на 3
Значення o.p було змінене з undefined на 4
</pre>

<h3 id="Використання_watch_для_перевірки_властивостей_обєкта">Використання <code>watch</code> для перевірки властивостей об'єкта</h3>

<p>Ви можете використати <code>watch</code>, щоб перевірити будь-які присвоєння значень властивостям об'єкта. Даний приклад перевіряє, що кожна людина (Person) завжди матиме дійсне ім'я (name) та вік (age) між 0 та 200.</p>

<pre class="brush: js">Person = function(name, age) {
  this.watch('age', Person.prototype._isValidAssignment);
  this.watch('name', Person.prototype._isValidAssignment);
  this.name = name;
  this.age = age;
};

Person.prototype.toString = function() {
  return this.name + ', ' + this.age;
};

Person.prototype._isValidAssignment = function(id, oldval, newval) {
  if (id === 'name' &amp;&amp; (!newval || newval.length &gt; 30)) {
    throw new RangeError("помилкове ім'я для: " + this);
  }
  if (id === 'age'  &amp;&amp; (newval &lt; 0 || newval &gt; 200)) {
    throw new RangeError('помилковий вік для: ' + this);
  }
  return newval;
}

will = new Person('Вілл', 29);
console.log(will);   // Вілл, 29

try {
  will.name = '';
} catch (e) {
  console.log(e);
}

try {
  will.age = -4;
} catch (e) {
  console.log(e);
}
</pre>

<p>Цей скрипт виведе наступне:</p>

<pre>Вілл, 29
RangeError: помилкове ім'я для: Вілл, 29
RangeError: помилковий вік для: Вілл, 29
</pre>

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

<p>Не є частиною жодних специфікацій. Реалізований у JavaScript 1.2.</p>

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

<div>


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

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

<ul>
 <li>Цей <a class="external link-https" href="https://gist.github.com/384583">Поліфіл</a> надає метод <code>watch</code> для усіх переглядачів, що сумісні з ES5.</li>
 <li>Використання {{jsxref("Proxy")}} дозволяє робити навіть більш глибокі зміни у роботі з присвоєнням властивостей.</li>
 <li>Виклик <code>watch()</code> на об'єкті {{domxref("Document")}} викидає помилку {{jsxref("TypeError")}}, починаючи з Firefox 23 ({{bug(903332)}}). Це було виправлено у Firefox 27.</li>
</ul>

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

<ul>
 <li>{{jsxref("Object.unwatch()")}}</li>
 <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li>
</ul>